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本 书 内 容 浅 显 易 懂 ， 实 例 丰富 ， 详 细 介 绍 了 HTML5+CSS3+JavaScript 开发 需要 掌握 的 各 类 实战 知识 。 

全 书 分 为 两 册 : 核心 技术 分 册 和 强化 训练 分 册 。 核 心 技术 分 册 共 17 章 ， 包 括 HTML 基础 、 文 本 、 图 像 和 超 链 接 、 
CSS3 概述 、CSS3 高 级 应 用 、 表 格 与 <div> 标 签 、 列 表 、 表 单 、 多 媒体 、HTMLS5 新 特性 、JavaScript 基础 、 绘 制图 形 、 
文件 与 拖 放 、JavaScript 对 象 编程 、 响 应 式 网 页 设计 、 响 应 式 组 件 、 课 程 设 计 一 一 游戏 公园 等 内 容 。 通 过 学 习 ， 读 者 可 
快速 开发 一 些 中 小 型 应 用 程序 。 强 化 训练 分 册 共 15 章 ， 通 过 大 量 源 于 实际 生活 的 趣味 案例 ， 强 化 上 机 实践 ， 拓 展 和 提 
升 软件 开发 中 对 实际 问题 的 分 析 与 解决 能 力 。 

本 书 除 纸 质 内 容 外 ， 配 书 资源 包 中 还 给 出 了 海量 开发 资源 ， 主 要 内 容 如 下 。 


回 ”视频 讲解 : 总 时 长 17 小 时 ， 共 162 集 技术 资源 库 : 800 页 技术 参考 文档 
实例 资源 库 : 400 个 实用 范例 测试 题库 系统 : 138 道 能 力 测试 题目 


回 ”面试 资源 库 : 369 道 企业 面试 真题 
本 书 可 作为 软件 开发 入 门 者 的 自学 用 书 或 高 等 院 校 相关 专业 的 教学 参考 书 ， 也 可 供 开发 人 员 查 阅 、 参 考 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电 话 : 010-62782989 13701121933 
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通过 网 站 获取 资讯 及 进行 学 习 、 娱 乐 、 消 费 ， 已 经 成 为 人 们 生活 和 工作 中 不 可 或 缺 的 一 部 分 。 随 
着 技术 的 发 展 , 网 站 内 容 越 来 越 丰富 , 网 页 页 面 越 来 越美 观 , 页 面 与 用 户 的 交互 性 也 越 来 越 强 .HTML5、 
CSS3 和 JavaScript 的 出 现 , 使 得 网 页 设计 从 外 观 上 更 炫 , 技术 上 更 简单 .因此 , HTML5+CSS3+JavaScript 
这 一 开发 组 合 受到 广大 程序 员 的 青睐 ， 成 为 网 页 开发 人 员 使 用 的 主流 编程 语言 


本 书 内 容 
本 书 分 为 两 册 : 核心 技术 分 册 和 强化 训练 分 册 。 


核心 技术 分 册 共 17 章 ， 提 供 了 从 入 门 到 编程 高 手 所 必需 的 HTML5、CSS3 和 JavaScript 各 类 核心 
知识 ， 大 体 结构 如 下 图 所 示 。 


第 1 篇 : 基础 篇 
快速 浏览 本 章 内 容 一 一 ] 
知识 讲解 [本 | 
图 示 
I 实例 、 视 频 
入 门 注意 、 说 明 、 技 巧 LD 
实战 一 
第 2 篇 : 提高 篇 高 手 
第 3 篇 项目 篇 快速 浏览 本 章 内 容 、 项 目 开 发 全 
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过 程 、 图 示 和 视频 等 


第 1 篇 : 基础 篇 。 本 篇 介绍 了 HTML 基础 、 文 本、 图 像 和 超 链 接 、CSS3 概述 、CSS3 高 级 应 用 、 
表格 与 <div> 标 签 、 列 表 、 表 单 、 多 媒体 、HIML5 新 特性 、JavaScript 基础 等 内 容 ， 使 读者 快速 掌握 开 
发 基本 内 容 ， 为 以 后 编程 莫 定 坚实 的 基础 。 

第 2 篇 : 提高 篇 。 本 篇 介绍 了 绘制 图 形 、 文 件 与 拖 放 、JavaScript 对 象 编程 、 响 应 式 网 页 设计 、 响 
应 式 组 件 等 内 容 。 学 习 完 本 篇 ， 能 够 开发 一 些 中 小 型 应 用 程序 。 

第 3 篇 : 项 目 篇 。 本 篇 通过 制作 一 个 “游戏 公园 ”主题 的 网 站 ， 运 用 软件 工程 的 设计 思想 ， 让 读 
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者 学 习 如 何 进行 软件 项 目的 实践 开发 。 书 中 按照 “需求 分 析 一 系统 设计 一 主页 实现 一 博客 列表 实现 一 
博客 详情 实现 一 关于 我 们 ”的 流程 进行 介绍 ， 带 领 读者 亲身 体验 开发 项 目的 全 过 程 。 

强化 训练 分 册 共 15 章 ， 通 过 250 个 来 源 于 实际 生活 的 趣味 案例 ， 强 化 上 机 实战 ， 拓 展 和 提升 读者 
对 实际 问题 的 分 析 与 解决 能 力 。 


本 书 特点 
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深入 浅 出 , 循序渐进。 本 书 以 初 、 中 级 程序 员 为 对 象 ， 先 从 语言 基础 学 起 (HTML 基础 、CSS 
基础 和 JavaScript 基础 ) , 再 学 习 网 站 制作 常用 组 件 的 功能 实现 , 最 后 学 习 开发 一 个 完整 项 目 。 
讲解 过 程 步骤 详尽 ， 版 式 新 颖 ， 使 读者 在 阅读 时 一 目 了 然 ， 从 而 快速 掌握 书 中 内 容 。 

实例 典型 ， 轻 松 易学 。 通 过 例子 学 习 是 最 好 的 学 习 方 式 ， 本 书 通过 “一 个 知识 点 、 一 个 例 
子 、 一 个 结果 、 一 段 评 析 、 一 个 综合 应 用 ”的 模式 ， 透 彻 详尽 地 讲述 了 实际 开发 中 所 需 的 各 
类 知识 。 另 外 ， 为 了 便于 读者 阅读 程序 代码 ， 快 速 学 习 编程 技能 ， 书 中 几乎 每 行 代码 都 提供 
了 注释 。 

微 课 视频 ， 可 听 可 看 。 为 便于 读者 直观 感受 程序 开发 的 全 过 程 ， 书 中 大 部 分 章节 都 配备 了 教 
学 微 视频 。 这 些微 课 可 听 、 可 看 ， 能 快速 引导 初学 者 入 门 ， 使 其 感受 编程 的 快乐 和 成 就 感 ， 
进一步 增强 学 习 的 信心 。 

强化 训练 ， 实 战 提升 。 软 件 开发 学 习 ， 实 战 才 是 硬 道理 。 核 心 技术 分 册 中 提供 了 40 个 实战 练 
习 ， 强 化 训练 分 册 中 更 是 给 出 了 250 个 源 自生 活 的 真实 案例 。 应 用 编程 思想 来 解决 这 些 生活 
中 的 难题 ， 不 但 能 锻炼 动手 能 力 ， 还 可 以 快速 提升 实战 技巧 。 如 果 在 实现 过 程 中 遇 到 问题 ， 
可 以 从 资源 包 中 获取 相应 实战 的 源码 进行 解读 。 

精彩 栏目 ， 贴 心 提醒 。 本 书 根据 需要 在 各 章 安排 了 很 多 “注意 ”“ 说 明 ”“ 技 巧 ”等 小 栏 
目 ， 让 读者 可 以 在 学 习 过 程 中 更 轻松 地 理解 相关 知识 点 及 概念 ， 更 快 地 掌握 个 别 技术 的 应 用 
技巧 。 在 强化 训练 分 册 中 ， 更 设置 了 “性 OBEG@G@ ”栏目 ， 读 者 每 亲手 完成 一 次 实战 练 
习 ， 即 可 涂 上 一 个 序号 。 通 过 反复 实践 ， 可 真正 实现 强化 训练 和 提升 。 


本 书 资源 
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为 帮助 读者 学 习 ， 本 书 配备 了 长 达 17 个 小 时 《〈 共 162 集 ) 的 微 课 视 频 讲解 。 除 此 以 外 ， 还 为 读者 
提供 了 “Java Web 开发 资源 库 ” 系 统 ， 可 以 帮助 读者 快速 提升 编程 水 平和 解决 实际 问题 的 能 力 。 
本 书 和 Java Web 开发 资源 库 配合 学 习 的 流程 如 下 图 所 示 。 
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Java Web 开发 资源 库 系 统 的 主 界面 如 下 图 所 示 。 


一 有 RE 


在 学 习 本 书 的 过 程 中 ， 可 以 配合 技术 资源 库 和 实例 资源 库 的 相应 内 容 ， 全 面 提升 个 人 综合 编程 技 
能 和 解决 实际 开发 问题 的 能 力 ， 为 成 为 软件 开发 工程 师 打 下 坚实 基础 。 

对 于 数学 逻辑 能 力 和 英语 基础 较为 薄弱 的 读者 ， 或 者 想 了 解 个 人 数学 逻辑 思维 能 力 和 编程 英语 基 
础 的 用 户 ， 本 书 提供 了 数学 及 逻辑 思维 能 力 测试 和 编程 英语 能 力 测试 以 供 练习 和 测试 。 

面试 资源 库 提供 了 大 量 国内 外 软件 企业 的 常见 面试 真题 ， 同 时 还 提供 了 程序 员 职 业 规 划 、 程 序 员 
面试 技巧 、 虚 拟 面试 系统 等 精彩 内 容 ， 是 程序 员 求职 面试 的 绝 佳 指南 。 


读者 对 象 
回 ”初学 编程 的 自学 者 回 ”编程 爱好 者 
回 ”大 中 专 院 校 的 老师 和 学 生 回 ”相关 培训 机 构 的 老师 和 学 员 
回 ”做 毕业 设计 的 学 生 回 初 、 中 级 程序 开发 人 员 
程序 测试 及 维护 人 员 参加 实习 的 “菜鸟 ”程序 员 
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读者 服务 


学 习 本 书 时 ， 请 先 扫描 封底 的 权限 二 维 码 〈 需 要 乔 开 涂 层 ) 获取 学 习 权限 ， 然 后 即 可 免费 学 习 书 
中 的 所 有 线 上 线 下 资源 。 本 书 所 附 赠 的 各 类 学 习 资源 ， 读 者 可 登录 清华 大 学 出 版 社 网 站 
(www.tup.com.cn) ， 在 对 应 图 书页 面 下 获取 其 下 载 方式 。 也 可 扫描 图 书 封底 的 “ 文 泉 云 盘 ” 二 维 码 ， 
获取 其 下 载 方式 。 


致 读者 


本 书 由 明日 科技 软件 开发 团队 组 织 编写 。 明 日 科技 是 一 家 专业 从 事 软件 开发 、 教 育 培 训 以 及 软件 
开发 教育 资源 整合 的 高 科技 公司 ， 其 编写 的 教材 非常 注重 选取 软件 开发 中 的 必需 、 常 用 内 容 ， 同 时 也 
很 注重 内 容 的 易学 、 方 便 性 以 及 相关 知识 的 拓展 性 ， 深 受 读者 喜爱 。 其 教材 多 次 荣获 “全 行业 优秀 畅 
销 品种 ”“ 中 国 大 学 出 版 社 优秀 畅销 书 ” 等 奖项 ， 多 个 品种 长 期 位 居 同 类 图 书 销售 排行 榜 的 前 列 。 

在 编写 本 书 的 过 程 中 ， 我 们 始终 本 着 科学 、 严 谨 的 态度 ， 力 求 精益 求 精 ， 但 错误 、 政 漏 之 处 在 所 
难免 ， 敬 请 广大 读者 批评 指正 。 

感谢 您 购买 本 书 ， 希 望 本 书 能 成 为 您 编程 路 上 的 领航 者 。 

“ 零 门 槛 ”编程 一切 独 有 可 能 。 

祝 读书 快乐 ! 


编 者 
2020 年 6 月 
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第 1 章 HTML 基础 


本 章 训练 任务 对 应 核心 技术 分 册 第 1 章 “HTML 基础 ”部 分 。 
重点 练习 内 容 : 


.熟悉 键盘 上 的 字母 、 数 字 、 符 号 的 位 置 。 
.使 用 键盘 上 的 字符 输出 文字 、 图 案 等 。 

.的 悉 特殊 字符 的 输出 和 使 用 。 

.使 用 字符 输出 常见 的 网 站 界面 。 
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应 用 技能 拓展 学 习 


1. WebStorm 常用 快捷 键 


WebStorm 编辑 器 被 广大 开发 者 誉 为 Web 前 端 开发 神器 、 强 大 的 HIMLS 编辑 器 、 智 能 JavaScript 
IDE 等 。WebStorm 中 有 很 多 实用 的 快捷 键 ， 如 表 1.1 所 示 。 熟 练 运用 WebStorm 中 的 快捷 键 ， 开 发 过 
悍 会 更 高 效 、 快 捷 。 


表 1.1 WebStorm 常用 快捷 键 


快 捷 键 含义 
Ctrl+t/ 或 CtrlHShiftt/ 注释 (// 或 者 /*...*/ ) 
Shift+F6 重 构 - 重 命名 
Ctrl+X 删除 行 
CtrlHtD 复制 行 
CltG 查找 行 
Ctrl+Shift+Up/Down 代码 向 上 /下 移动 
F2 或 Shift+F2 高 亮 显示 错误 或 快速 定位 警告 
写 代码 ， 按 Tab 生成 代码 


2. HTML 注释 快捷 键 (WebStorm 编辑 器 ) 


(1) 注释 标签 <!--.….--> 
注释 标签 <!--.….--> 用 来 在 代码 中 插入 注释 。 注 释 能 帮助 他 人 快速 读 懂 代码 ， 减 轻 网 站 维护 难度 。 
注释 的 内 容 不 会 在 浏览 器 中 显示 。 代 码 注释 的 语法 格式 如 下 : 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


<!-- 这 是 一 个 注释 ， 注 释 在 浏览 器 中 不 会 显示 --> 

<p> 这 是 一 个 段落 </p> 

人 i 注 意 : “<!” 后 和 “>” 前 有 两 个 连 字 符 ， 有 些 浏览 器 对 此 有 严格 检查 。 
(2) 注释 快捷 键 

在 WebStorm 中 ，HTML 的 注释 快捷 键 为 “Ctrl + Alt+? ”。 


3. 谷歌 浏览 器 中 的 开发 者 工具 


谷歌 浏览 器 〈Google Chrome) 功能 丰富 、 便 利 、 快 捷 ， 市 场 占有 率 非常 高 。 按 F12 键 ( 或 快捷 键 
Ctrl+ShifttIT) ， 可 轻松 访问 浏览 器 搭载 的 开发 者 工具 。 

(1) 开发 者 工具 面板 

谷歌 浏览 器 的 开发 者 工具 还 未 被 汉化 ， 所 以 菜单 等 信息 都 是 英文 显示 。 以 百度 网 页 为 例 ， 进 入 百 
度 首 页 后 ， 按 键盘 上 的 F12 快捷 键 ， 即 可 调 出 开发 者 工具 面板 。 

如 图 1.1 所 示 ， 最 上 方 一 栏 包含 了 选择 图 标 、 移 动 设备 图 标 和 功能 面板 菜单 。 


党 百 划 下 ,人道 x 用 


S C a https//wwwbaidu.com A: 


Network Sources Console Audits Security Perfo Applicaton 


s” style-"display:none;”> 


ult_css" style-"display:none; 


s_index off_css” style-"display:nene; 


‘ground.s-manhattan-index 


图 1.1 谷歌 浏览 器 的 开发 者 工具 页 面 
加 ”选择 图 标 [x 可 使 用 鼠标 选择 网 页 上 的 元 素 。 
移动 设备 图 标 岂 ， 表示 当前 界面 是 否 切换 为 移动 设备 模式 。 
功能 面板 菜单 :包含 9 个 功能 面板 选项 , 分 别 是 Elements、Memory、 Network、Sources、 Console、 
Audits、Security、Performance 和 Application 。 
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(2) Elements 功能 面板 
Elements 面板 主要 用 于 验证 标签 元 素 及 其 样式 ， 是 Web 开发 者 使 用 最 多 的 功能 选项 。 
如 图 1.2 所 示 ， 在 Elements 功能 面板 中 ， 左 侧 为 DOM 树 信息 区 ， 可 用 树 形 图 的 形式 显示 当前 的 
HTML 元 素 信息 ;底部 为 标签 层次 信息 栏 ， 当 前 选择 的 HTML 元 素 层次 内 容 将 显示 在 这 里 ， 右 侧 为 样 
式 信息 区 ， 当 前 选择 的 HTML 元素 的 CSS 样式 等 信息 将 显示 在 这 里 。 


Network Sourcs Console Audits Securty Performance Applicaton 


Computed EventListeners DOMBreakpoints Properties Accessibility 


ad 
-is-lite has-background s-manhattan-index” 
sis_index_css” style-"display:none;™>- 
Petextares id""s_is_result_css" style-"display:none; height: 100%; 


min-wicth: 1009px; 
curcor: default; 


input type-"hidden” id-"bsToken” name-"bsToken relative; 
Values"aabe6a6762dc3c112csesesdd6dal83d 


图 1.2 Element 功能 区 


Elements 功能 区 中 ， 常 用 的 操作 有 以 下 几 种 。 
双击 标签 名 称 ， 可 编辑 标签 ， 如 图 1.3 所 示 。 


*<div class="s_bdbri s_bdbriimg” style="opacity: 1; min- 

height: 600px; display: noneji">-</div 

</div> 
Ppxstyle>.</style> 

<div class="clear” 


Eo i rap head_wrapper 


="stylesheet” href="https://ssl.bdstatic.com/ 
SeN1bjq8AAUYm2zgoY3K/r/www/ cache/static/protocol/https/ 
” type="text/css” data-for="result"> 


图 1.3 编辑 标签 功能 
双击 属性 ， 可 编辑 属性 ， 如 图 1.4 所 示 。 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


Y<div id= “head wrapper” class="s-isindex-wrap head wrapper s- 
title-img s-ps-islite”> 
<link rel="stylesheet™ 


:Com/SeN1lbjq8AAUYm2zgoY3K/r/www/c| 


ve<div class="s_form wrapper soutu-env-nomac soutu-env- 
newindex” id="s_form wrapper”> 


图 1.4 编辑 属性 功能 
右键 单 击 ， 在 弹出 的 快捷 菜单 中 选择 Edit as HTML 命令 ,可 再 次 编辑 HTML， 如 图 1.5 所 示 。 


@ htips//www.bhaidu.com 


T By 
已 ai 人 dh 
展 所】 Hemems Memory Network Sources Console pAudits Secuity Performance Appliction a2| 1 x 
CDJSFTTEETST 64, 64) background inagerurl( “https:// 3 
ss3.bdstatic. com/ipozexSmiAsBphGlnve/skin/6.jp8?2");"> </div Styles Computed Eventlisteners DOM Breakpoints Properies »» 
Yby de"heod® lose"s-shimhosbs white-lope 3-opectty-90 ps i 
ediv id"s top wrap” class»"s-top-wrap” style-"left: gpx;"> 图 elenent.style { 
/div> 
Dediy 1d-"s_upfune_nenus” clasc-rs-upfunc-menuary-c/dav Cr TR] 
=-index: See; 
} 
su sp{ Cindex):1 
pocition: abeolute; 
top: 95 
right: ©; 


‘sbaidu. com" 
https/ /we 


target="_blank” class="nnav";> 学 术 ¢/a>ca ide"s usernane_top” 
Class="s-User-| -top” ds tid="2064" text-alien: right; 
/i.baidu.con/" target="_blank">¢span color: 国 *399; 
-name" >baihongjian200</ spany< /a3<3 } 
Hd-"s usersetting_top” href-"jovascript:)" 
tj_settingiton" cless"pf s-user-setting-top">cspen Wi 
setting-text" > 设置 (/span></ar<a 
etp:// Imm. batdu, com/more/” namee"tj_briicon” 


s_bri” target=”_blank"> 由 多 产品 (/a>cdiv er rer a rr pe pp 
de"s ser nane menu” Classe"s-isindex-wrap s-user-set-menu | "etedfrom civehesd. ectin-hacbg white logo.e-opacity-90. cow 


user ogent stylesheet 
disploy: bloch; 


shead { super_nin 353cb37f.c: 


html body #wrapoer #head div#u_sps-sindex-wraps-sp-menu 


图 1.5 再 次 编辑 HIML 


实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 


1. 输出 雷军 的 名 言 POoOOOOO 


编写 程序 ， 输 出 雷军 的 名 言 “ 天 道 不 一 定 酬 勤 ， 深 度 思考 比 勤奋 工作 更 重要 ”， 实 现 效果 如 图 1.6 
所 示 。 


第 1 章 HIML 基础 


2. 输出 中 英文 版 的 “时 间 不 等 人 ” POOQOQOOO 


编写 程序 ， 输 出 中 英文 版 的 “时 间 不 等 人 ”及 “Time and tide wait for no man”， 效 果 如 图 1.7 
所 示 。 


eel” ee x 
轿 #2 二 x 1 国 xn fs x 莉 十 


C QQ 在 6oogle 朗 突 ,或 寺 .， 虽 @ CQ 在 6ooqle 中 近 索 ， 甸 日 O 


时 间 不 等 人 . 


图 1.6 输出 雷军 的 名 言 图 1.7 中 英文 版 的 “时 间 不 等 人 ” 
3. 输出 俞敏洪 老师 的 图 书信 息 >Oooooe 
编写 程序 ， 输 出 命 敏 洪 老师 图 书 《 愿 你 的 青春 不 负 梦 想 ) 的 出 版 信息 ， 如 图 1.8 所 示 。 


4. 输出 绕口令 POOOOOO 
编写 程序 ， 输 出 绕口令 《 画 凤 凰 》 的 内 容 ， 实 现 效 果 如 图 1.9 所 示 。 
[Pen 口 王 一 re | 


盏 风 凰 
出 版 时 间 : 2017-01-01 扮 红 墙 上 画 风 忌 ， 凤 尾 画 在 粉红 墙 
定价 : 3979 元 红 风 尾 、 粉 风 怕 ,红粉 风 斩 、 花 风 晶 
1.8 输出 俞敏洪 老师 图 书 的 信息 1.9 输出 绕口令 


5. 输出 跨 年 演 讲 主题 POOOOOO 


2017 年 跨 年 夜 ， 罗 振 字 老师 开始 了 他 人 生 中 第 三 次 “时 间 的 朋友 ” 跨 年 演 讲 。 编 写 程序 ， 使 用 键盘 上 
的 “人 ”符号 ， 输 出 跨 年 演 讲 主题 “ 哪 来 直接 登 项 的 人 生 ， 只 有 不 断 迭 代 的 历程 ”， 效 果 如 图 1.10 所 示 。 


EN x | 
国王 丘 主 之 /5 名 三 x 星 十 
C a Ecoogleh 二 雪 , 或 -加 @ 
RS&RRRRLRLRCRLBRRB 
| 名 来 直接 登 恋 的 人 生 ， 
| 只 有 不 新 闪 代 的 历程 
&R&R&R&R&RRRRRR&RS 


图 1.10 输出 跨 年 演讲 主题 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 
训练 二 : 实战 能 力 强化 训练 
6. 输出 淘宝 网 底部 菜单 >OoG@e@oe@ 


仔细 观察 ， 可 发 现 淘宝 网 首页 的 底部 有 许多 推广 链接 ， 还 有 一 个 导航 菜单 ， 以 及 各 类 许可 证 信息 。 


信息 x 中 
C Re le 中 按 索 ， 或 者 入 eo 


关于 淘宝 合作 伙伴 襄 销 中 心 廉政 举报 联系 客服 开放 平台 城 征 英才 联系 我 们 网 站 地 图 隐私 权 政策 法 律 声明 知识 产权 


1.12 ”实现 效果 
7. 输出 腾讯 免费 直播 课 公告 >OoG@e@oe@ 


腾讯 课堂 有 许多 免费 直播 课 ， 爱 学 习 的 人 可 随时 选择 自己 感 兴趣 的 课程 进行 在 线 学 习 。 如 图 1.13 
所 示 为 “Python 爬虫 实战 ”的 直播 课程 页 面 ， 右 侧 会 以 列表 形式 公告 正在 直播 中 的 课程 信息 ， 以 及 即 
将 开播 的 课程 信息 。 

编写 程序 ， 模 拟 输出 腾讯 免费 直播 课 的 公告 信息 ， 效 果 如 图 1.14 所 示 。 


免费 直播 课 


分 布 式 吉 务 进 阶 祥 & 一 扒 分 布 式 可 与 那些 吉 
Python 疏 虫 实战 -- 一 键 抓 取 房 源 信息 
未 正 在 上 课 i 过 旗 还 原单 例 对 铺 祝 破坏 的 这 故 现场 


NET 快 速 实战 训练 第 1 集 


务 原 理 手 瑟 高 性 第 阁 户 迁 


SpringCloud Alibaba 之 Dubbo 企 业 及 实战 


来 自 课程 : Python 委 基础 快速 : 


BAT 安 全 防 徊 实战 ， 你 9 数据 正在 网 上 裸奔 


图 1.13 腾讯 课堂 直播 课程 


ee 
加 着 深 兰 宇 党 当下 全 x 二 


clal eo 
走 播 中 : 分 布 式 事务 进 阶 实 战 扒 一 扒 分 布 式 事 务 那些 可 
直播 中 : Python 息 中 实战 -- 一 键 抓 取 房 源 信息 
直播 中 : 深度 还 原单 例 对 繁 被 破坏 的 事故 现场 
喜 播 中 : NET 快 速 实战 让 些 第 1 集 
直播 中 : 透视 Redis 通 信服 务 原 还 手写 高 性 通 客 尸 绩 
直播 中 : SpringCloud Alibaba 之 Dubbo 企 业 及 实战 
直播 中 : BAT 安 全 防 翌 实战 ， 你 的 数据 正在 网 上 深 奔 


图 1.14 “输出 腾讯 直播 课 公告 
8. 输出 明日 学 院 简介 POOOOOO 


在 明日 学 院 的 官方 网 站 上 ， 可 以 找到 相关 的 介绍 内 容 ， 如 图 1.15 所 示 。 编 写 程序 ， 输 出 明日 学 院 
网 页 中 “关于 我 们 ”这 段 内 容 ， 如 图 1.16 所 示 。 


明 学 院 者 注 仿 程 私 育 二 十 年 ! 图 书 全 沪 宇 店 江 我 的 昌 得 | 阿 昌 老 师 [ET 


wwwmingrsoftcom 


| 关于 我 们 


明日 学 院 ， 是 吉林 人 省 明日 科技 有 限 公司 倾 力 打造 的 在 线 实 月 技 能 学 习 平台 ， 该 平台 

于 2016 年 正式 上 线 ， 主 要 为 学 习 者 提供 海量 、 优 身 的 谋 程 ， 课 程 结构 严谨 ,用户 
四 可 以 根据 自身 的 学 习 程度 ， 自 主 安排 学 习 进度 。 我 们 的 宗旨 是 ， 为 编程 学 习 老 提供 
上 一 站 式 服务 ， 培 养 用 户 的 编程 思 堆 , 


图 1.16 ”实现 效果 
9. 输出 新 浪 官网 底部 版 权 信息 POOQOOOO 


网 页 的 最 下 方 通常 是 一 行 版 权 信息 文字 ， 如 图 1.17 所 示 为 新 浪 网 页 面 底部 的 版 权 信 息 。 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


使 用 键盘 上 的 字母 或 符号 ， 编 程 输出 如 图 1.18 所 示 的 版 权 信息 效果 。 


新 浪 简介 : 如 out Sina | 广告 服务 | 联系 我 们 i 诚 聘 英 才 ; 网 站 律师 : SINA English | 注册 


图 1.17 新 浪 网 底部 版 权 信息 


国 六 风气 标 可 后 xH+ 


Ca 在 Google 中 换 


由 甸 0 


| Copyright ©1996-2019 SINA Corporation, All Rights Reserved 


图 1.18 实现 效果 


‘Ts 


第 2 章 文本 


本 章 训练 任务 对 应 核心 技术 分 册 第 2 章 “文本 ”部 分 。 
重点 练习 内 容 : 

， 段 落 标签 的 熟练 掌握 。 

.使 用 特殊 符号 输出 内 容 。 
.输出 常见 的 文字 排版 内 容 。 

.使 用 字符 输出 生活 中 常见 的 一 些 应 用 场景 。 


上 mm 一 


应 用 技能 拓展 学 习 


<article> 标 签 


<article> 标 签 是 HIML5 中 新 增 的 标签 ， 用 来 定义 独立 于 文档 且 有 意义 的 外 部 内 容 ， 如 新 闻 内 容 、 


博客 内 容 和 论坛 内 容 等 。 


<article> 标 签 的 语法 格式 如 下 : 
<article> 内 容 </article> 


四 说 明 : <article> 标 签 中 的 内 容 经 常 包含 有 <hl>、<header>、<footer> 等 标签 。 
在 搭建 博客 或 新 闻 内 容 的 页 面 中 ， 可 以 使 用 <article> 标 签 ， 基 本 代码 结构 如 下 : 
<article> 

<h1> 文 档 标 题 </h1> 

<p> 文 章 段落 </p> 

<p> 文 章 段落 </p> 

<p> 文 章 段落 </p> 
</article> 


运行 结果 如 图 2.1 所 示 。 


.<section> 标 签 


<section> 标签 用 来 定义 文档 中 的 节 ， 如 章节 、 页 眉 、 页 脚 或 文档 中 的 其 他 部 分 。 

需要 注意 的 是 : 

加 ”<section> 不 是 一 个 专用 来 作为 容器 的 标签 。 如 果 是 为 了 设置 样式 或 处 理 脚 本 ， 专 用 的 是 <div> 
标签 。 
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HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


回 “<section> 里 应 该 有 标题 标签 (hl1~6)， 但 在 文章 中 推荐 使 用 <article> 标签 。 
回 ” 当 元 素 内容 被 列 在 文档 大 纲 中 时 ， 才 适合 用 <section> 元 素 。 


回 ”<section> 的 作用 是 对 页 面 上 的 内 容 进 行 分 块 ， 如 含 标题 的 版 块 、 功 能 区 等 ， 或 对 文章 进行 分 


段 。 不 要 与 有 自己 完整 、 独 立 内 容 的 <article> 标 签 相 混淆 。 
<section> 标签 的 语法 格式 如 下 : 


<section> 内 容 </section> 


的 说 明 : < section > 标签 中 的 内 容 经 常 包 含有 <h1> 标 签 。 
在 搭建 博客 或 新 闻 内 容 的 页 面 中 ， 可 以 使 用 <article> 标 签 ， 代 码 如 下 : 


<!IDOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>section 标签 </title> 
</head> 
<body> 
<section> 
<h2> 体 育 板块 </h2> 
<p> 介 绍 国内 外 最 新 体育 信息 内 容 </p> 
</section> 
<article> 
<h2> 评 论 : 中 国足 球 何 时 能 走出 国门 ? </h2> 
<section> 
<h3> 段 落 1</h3> 
<p> 段 落 1 的 内 容 </p> 
</section> 
<section> 
<h3> 段 落 2</h3> 
<p> 段 落 2 的 内 容 </p> 
</section> 
<section> 
<h3> 段 落 3</h3> 
<p> 段 落 3 的 内 容 </p> 
</section> 
</article> 
<footer> 
底部 版 权 信息 等 内 容 
</footer> 
</body> 
</html> 


运行 结果 如 图 2.2 所 示 。 


一 | 
国 articdeE 竺 x B+ 
CQ 在 Google 中 搜索 上 eo 
文档 标题 
文章 段落 
文章 段落 
文章 段落 


图 2.1 <article> 标 签 效 果 


3. 特殊 符号 “&emsp;” 


特殊 符号 “&emsp:” 用 于 定义 一 个 全 角 的 空格 。 其 占据 的 宽度 正好 是 一 个 中 文 的 宽度 ， 而 且 基本 


上 不 受 字体 影响 。 


section 标 答 x + 


CGC QQ 在 Gooc 


体育 板块 

介绍 国内 外 最 新 体育 信息 内 容 

评论 : 中 国足 球 何 时 能 走出 国门 ? 
段落 1 

段 划 1 的 内 容 

段落 2 

段落 2 的 内 容 

段落 3 

段 汪 3 的 内 容 

许 部 版 权 信息 等 内 容 


图 2.2 ”<section> 标 签 效果 


例如 ， 在 段落 文本 的 起 始 处 应 用 “&emsp;” 符 号 定义 两 个 中 文 宽度 的 空格 ， 代 码 如 下 : 


<h2> 超 文本 标记 语言 </h2> 


<p>&emsp;&emsp;HTML 语言 (Hypertext Markup Language, 中 文通 常 称 为 超 文本 置 标语 言 或 超 文本 标记 语言 ) 
是 一 种 文本 类 、 解 释 执行 的 标记 语言 ， 它 是 Internet 上 用 于 编写 网 页 的 主要 语言 。 用 HTML 编写 的 超 文 本 文件 称 


为 HTML 文 件 。</p> 


运行 结果 如 图 2.3 所 示 。 


超 文本 标记 语言 


HTML 语 言 ( Hypertext Markup Language， 中 文通 


常 称 为 超 文本 置 标语 
解释 执行 的 标记 语言 ， 


或 超 文本 标记 语言 ) 是 一 种 文本 类 、 
它 是 Internet 上 用 于 编写 网 页 的 主要 


语言 。 用 HTML 编 写 的 超 文本 文件 称 为 HTML 文 件 。 


图 2.3 段 首 定义 两 个 空格 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 


1. 输出 每 日 励志 名 言 POOQOQOOO 
编写 程序 ， 应 用 标题 标签 输出 每 日 励志 名 言 ， 实 现 效果 如 图 2.4 所 示 。 
2. 输出 影片 基本 信息 POOQOOOO 


《我 是 传奇 》 是 威 尔 。 史 密斯 主演 的 一 部 科幻 电影 。 编 写 程序 ， 使 用 标题 标签 中 的 align 属性 ， 输 
出 该 影片 的 海报 图 片 、 中 文 名 、 导 演 和 主演 等 信息 ， 效 果 如 图 2.5 所 示 。 


每 日 励志 名 言 


理想 是 人 生 的 太阳 。 一 一 德 革 宾 
时 间 是 一 切 财富 中 最 宝贵 的 财富 。 一 一 德 奥 弗 拉 斯 多 中 文 名 : 我 是 传奇 
成 功 的 秘 决 ， 在 永 不 改变 既定 的 目的 。 一 卢梭 导演 : 更 阴 西 其 劳伦斯 
伟大 的 思想 能 变 成 巨大 的 财富 。 一 一 室内 加 主演 : 威 尔 , 史 密斯 
图 2.4 输出 每 日 励志 名 言 图 2.5 输出 影片 基本 信息 
3. 输出 马云 语录 PoOOOOOO 


编写 程序 ， 输 出 马云 语录 “别人 可 以 拷贝 我 的 模式 ， 不 能 拷贝 我 的 苦难 ， 不 能 拷贝 我 不 断 往 前 的 
激情 ”。 要 求 文字 带 颜 色 ， 并 用 如 图 2.6 所 示 的 版 式 输出 。 


4. 输出 明日 学 院 官方 网 站 地 址 POOOOOO 
编写 程序 ， 在 明日 学 院 简介 中 用 斜体 字 输 出 明日 学 院 的 官方 网 站 地 址 ， 效 果 如 图 2.7 所 示 。 
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图 2.6 输出 马云 语录 


明日 学 院 简介 


明日 学 院 ， 是 吉林 省 明日 科技 有 限 公司 倾 力 打造 的 在 线 实用 技能 学 习 


平台 ， 该 平台 于 2016 年 正式 上 线 ， 主 要 为 学 习 者 提供 海量 、 优 质 的 课程 ， 
课程 结构 严谨 ， 用 户 可 以 根据 自身 的 学 习 程度 ， 自 主 安排 学 习 进度。 我 们 
的 宗旨 是 ， 为 编程 学 习 者 提供 一 站 式 服务 ， 培 养 用 户 的 编程 思维 。 明 日 学 
院 的 官方 网 站 地 址 是 htfp;/Wwwwimingrisoft com ,欢迎 大 家 访问 。 


图 2.7 输出 明日 学 院 简介 


5. 输出 2018 年 世界 杯 分 组 情况 POOOOOO 


编写 程序 ， 输 出 2018 年 世界 杯 足 球赛 小 组 赛 的 分 组 情况 ， 要 求 每 组 之 间 用 一 条 横 线 进行 分 隔 ， 实 
现 效果 如 图 2.8 所 示 。 


6. 输出 彩色 数字 POOOOOO 


编程 输出 如 图 2.9 所 示 的 彩色 数字 ， 点 阵 用 特殊 符号 “* ”或 者 “ 口 ” 都 可 以 ， 文 字 颜 色 按 实 际 颜 
色 输 出 。 


2018 世 界 杯 分 组 情况 


A 组 : 俄罗斯 沙特 阿拉 伯 埃及 乌拉 圭 
8 组 : 葡萄 牙 西班牙 摩洛哥 伊朗 


5 组 : 法 国 澳大利亚 秘鲁 丹 才 


D 组 : 阿根廷 冰岛 克罗地亚 尼日利亚 [es 
钨 出 彩色 数字 x 玫 击 


组 : 巴西 瑞士 哥 斯 达 秦 加 塞尔维亚 CQ 在 6oogle 中 搜索 ,.. 甸 @0O 


F 组 : 德国 墨西哥 瑞典 韩国 


G6 组 : 比利时 巴拿马 突尼斯 英格兰 


H 组 : 波兰 塞内加尔 哥伦比亚 日 本 


图 2.8 输出 2018 世界 杯 分 组 情况 图 2.9 输出 彩色 数字 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


7. 输出 微 信 支付 凭证 POOQOOOO 


编写 程序 ， 输 出 如 图 2.10 所 示 的 微 信 支付 凭证 。 不 考虑 文字 大 小 ， 图 标 可 以 不 输出 ， 最 终 实 现 效 
果 如 图 2.11 所 示 。 


一 :一 | 
[和 中 
C QE 中 讼 未 ,或 者 .图 0 
< 微 信 文 付 @| 
微 信 支 付 凭证 由 信 喜 付 赁 证 
付 寺 多 客 
*19.00 a 
收 款 方 : 来 去 自由 
来 去 自由 成 功 ， 对 方 已 斤 款 
支付 成 功 ， 对 方 已 付款 
查看 账单 详情 
图 2.10 ” 微 信 支 付 赁 证 图 2.11 实现 效果 
8. 输出 2018 年 天 猫 双 十 一 总 成 交 额 PoOOOOOO 


2018 年 天 猫 双 十 一 的 成 交 额 为 2135 亿 元 ， 创 造 了 中 国 乃 至 全 球 商业 的 传奇 。 尝 试 输出 如 图 2.12 
所 示 的 成 交 额 数字 效果 。 
代 注 意 : 如 果 计 算 机 中 安装 有 搜狗 输入 法 ， 也 可 使 用 搜狗 工具 箱 中 的 符号 实现 输出 。 


el) 
图 给 出 20183 年 天 堵 双 十 一 总 成 六 额 x 计 十 
CGC Q 在 Google 加 © 
加 加 加 加 LJ 加 加 加 加 LL [LL 
图 图 mm 加 
图 图 nm 加 图 LJ 
LE 本 加 田 加 国 本 本 古本 本 国 本 图 
图 图 mn mm 用 
LE 本 加 田 加 加 本 加 加 加 LL 
图 2.12 输出 2018 年 天 猫 双 十 一 总 成 交 额 
9. 输出 超市 购物 小 票 >Ooo@oooe@ 


超市 购物 后 ， 常 会 收 到 如 图 2.13 所 示 的 超市 购物 小 票 。 用 HIML 编写 一 段 程序 ， 输 出 如 图 2.14 
所 示 的 购物 小 票 。〈 可 尝试 用 程序 输出 其 他 各 种 购物 清单 ) 
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第 2 章 文本 


操作 员 :1 收 泥 号 : 4370 
日 期 : 2017-09-24 17:48 称号 : 10414 
商品 名 称 
千克 (个 ) ”元 /千克 (个 ) 元 

排 作风 尹 时 4370 

He 水 可 于 (特价 ) 

村 2.245 256 5.80 

玉 有 。 一 - 
件数 /交易 数 1/1 。 合计 5.80 
应 付 5.80 
现金 5.80 

欢迎 惠顾 ! 
图 2.13 ” 微 信 支 付 赁 证 图 2.14 实现 效果 
10. 输出 商品 标价 签 POOOOOO 


参照 图 2.15， 用 HTML 输出 一 个 商品 标价 签 。 不 考虑 背景 颜色 、 图 标的 背景 图 片 、 文 字 的 颜色 和 
大 小 ， 但 要 求 整体 结构 完全 一 致 。 最 终 效 果 如 图 2.16 所 示 。 


商品 标价 签 
品名 货号 
i NAME ARTICLE NO 
商品 标价 签 
如 
有 ee 
产地 等 级 
二 5 
PE EE 
| se EA PR 
2.15 ”商品 标价 签 2.16 ”实现 效果 


训练 二 : 实战 能 力 强化 训练 


11. 居中 排版 节日 板报 >Ooo@oooe@ 
试 着 利用 align 属性 ， 采 用 居中 排版 方式 实现 一 则 节日 板报 ， 效 果 如 图 2.17 所 示 。 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


12， 居中 排版 唐诗 POOOOOO 


D 3 
| 
el 日 : 二 A 
《 赋 得 古 原 草 送 别 》 
清明 节 
离 高 原 上 草 ， 一 岁 一 枯 荣 。 
一 。 中 国 传统 的 清明 节 大 均 始 于 周 代 ,更 今 已 有 
历 书 》 : “春分 后 十 五 日 ， 斗 指 丁 , 为 清明 , 时 野火 烧 不 尽 ,春风 吹 又 生 。 
时 当 气 清 萌 明 ,万 物 皆 旦 ， 因 此 得 名 。” 清 明 一 到 , 
时 节 , 故 有 “清明 前 后 , 种 所 种 豆 ”。 清 远 芳 侵 古道 ， 畏 盏 接 蕊 城 
明 节 是 一 个 祭礼 祖 先 的 节日 ， 主 要 是 扫 曹 ， 扫 曹 是 慎 瓜 追 远 、 敦 亲 睦 族 及 
行 地 的 具体 表现 。 清明 节 是 在 仲春 与 硅 春 之 交 ,也 就 是 冬至 后 的 106 天 。 又 送 王孙 去 ， 重 委 满 别 情 。 
图 2.17 节日 板报 图 2.18 居中 排版 唐诗 
13. 天 气 预 报 消息 发 布 POOOOOO 
试 着 使 用 <hl>、<h4> 和 <h5> 标 签 ， 实 现 一 则 天 气 预报 消息 发 布 ， 效 果 如 图 2.19 所 示 。 
14. 打折 商品 清单 POOOOOO 


试 着 使 用 <strike> 标 签 ， 完 成 打折 商品 清单 页 面 ， 效 果 如 图 2.20 所 示 。 


Ema 
D ssa x + [| 打折 南 品 清音 
CQ 在 Google 中 搜索 ,区 者 勿 入 ©: 
人 二 
气 预报 


打折 商品 清单 


【帽子 】 原 价 : 25:89 元 ,打折 : 15.00 元 
【衣服 】 原 价 : 59-96 元 , 打折 : 20.00 元 


发 布 时 间 : 06:20 03/30 | 发 布 者 : 气象 局 | 问 读数 : 200 次 


同时 ， 今 天 白天 到 夜间 ， 山 东 陆 地 和 海上 大 风 呼 哪 ， 阵 风 可 
达 7~8 级 。 在 大 风 和 降雨 的 双重 打压 下 ,多 地 最 高 气温 在 
10°C 以 下 ， 体 感 较 冷 。 明 天 起 ,天气 转 畏 ,气温 迅速 回 
升 , 未 来 一 周 多 地 气温 将 创 今年 来 新 高 。 
【裤子 】 原 价 : 75-96 元 ,打折 : 30.00 元 


图 2.19 天 气 预报 消息 发 布 图 2.20 打折 商品 清单 
15. 输出 方程 2X+X2=16 POOQOOOO 


使 用 <sup> 上 标 标签 ， 输 出 方程 2X+X?=16， 如 图 2.21 所 示 。 
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16. 输出 方程 8SYi-Xs=20 >Oooooe 
使 用 <sub> 下 标 标签 ， 输 出 方程 8Y1-Xs=20， 如 图 2.22 所 示 。 
Ele 
D 上 和 x 星 十 calis) 
D ft 和 x B+ 
CG ”QQ 在 Google 中 搜索 ©: 
CQ 在 Google 中 搜索 ©: 
示 标 签 练 一 经 三 二 
WE 下 标 标签 练 一 练 
2X+X2=16 
8Y1-X3=20 


图 2.22 输出 方程 8Y1-X3=20 


图 2.21 输出 方程 2X+X2=16 
17. 绘制 情人 节 字 符 画 >Ooooooe 
试 着 使 用 特殊 文字 符号 ， 发 挥 想象 创意 ， 完 成 一 个 情人 节 的 字符 画 ， 如 图 2.23 所 示 。 
>Ooooooe 


18. 给 自己 画 个 字符 画像 
字符 画像 。 如 图 2.24 所 示 为 参考 图 像 。 


试 着 使 用 特殊 文字 符号 ， 发 挥 想象 创意 ， 完 成 自己 的 字 
GE 
口 和 人物 放 符 画 x ET 
cols) Xx 
口 情人 五 字符 画 x 攻 坏 wn CG ”在 Google 中 搜索 ,或 者 给 入 ©:i 
ee 是 志 e 
人 物 字 符 画 
-rm 人 fi = 
情人 节 字符 画 1 二 
妇女 安 女 妆 妆 妇女 ( ue 
次 众 。 视 你 快乐! 次 妆 Vs 凡 
交友 妇女 Ti\ 
/vv 
术 、 A CNADD 
坟 交 妆 妆 l 
妇 妆 
图 2.24 给 自己 画 个 字符 画像 


图 2.23 “绘制 情人 节 字符 画 
POOOOOO 


19. 完成 一 则 通告 内 容 
试 着 使 用 <p> 段 落 标签 和 <br> 换 行 标签 ， 完 成 一 则 通告 内 容 ， 效 果 如 图 2.25 所 示 。 


时 
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HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


20. 使 用 水 平 线 标签 实现 菜谱 列表 


POOOOOO 
试 着 使 用 <hr> 水 平 线 标签 ， 实 现 一 个 菜谱 列表 ， 效 果 如 图 2.26 所 示 。 
(= © Ei 
口 今日 木兰 x + 
CQ 在 6oogle 中 探索 © 
今日 菜单 
ES 
Dm * WE 麻 当 豆腐 “12 元 
[cM 搜索 ， 或 者 输 ee: 


通知 : 清明 节 放 假 安排 


根据 国家 法 律 ， 现 将 2017 年 清明 节 放假 汕 休 日 期 的 具体 安排 通 
知 如 下 : 


4 月 2 日 至 4 日 放假 调 休 ， 共 3 天 。4 月 1 日 (星期六) 上班。 
节假日 期 间 ， 各 部 门 要 妥善 安排 好 值班 和 安全 、 保 卫 等 工作 。 


图 2.25 ”完成 一 则 通告 内 容 


图 2.26 使 用 水 平 线 标签 实现 菜谱 列表 


第 3 章 图像 和 超 链接 


本 章 训练 任务 对 应 核心 技术 分 册 第 3 章 “ 图 像 和 超 链接 ”部 分 。 
侣 ”重点 练习 内 容 : 


1. SVG 图 像 的 使 用 。 

2. AlloyImage 图 像 处 理 库 的 使 用 。 

3. 复习 图 像 和 超 链 接 的 知识 内 容 。 

4. 使 用 图 像 和 超 链接 ， 输 出 网 络 中 常见 的 一 些 应 用 场景 。 


应 用 技能 拓展 学 习 


1. SVG 图 像 


SVG (Scalable Vector Graphics， 可 缩放 矢量 图 形 ) 是 一 种 基于 XML 的 图 像 格式 。 其 他 图 像 格式 
都 是 基于 像素 处 理 的 ，SVG 属于 对 图 像 的 形状 描述 ， 其 本 质 上 是 一 个 文本 文件 。SVG 图 像 体 积 较 小 ， 
且 不 管 放 大 多 少 倍 ， 都 不 会 失真 。 
设置 SVG 图 像 的 语法 格式 如 下 : 
<svg width="100%" height="100%"> 
<circle id="mycircle" cx="50" cy="50" r="50" /> 
</svg> 


的 说 明 : <svg> 的 width 属性 和 height 属性 用 于 指定 SVG 图 像 在 HTML 元 素 中 占据 的 宽度 和 高 
度 。 除 了 相对 单位 ， 也 可 以 采用 绝对 单位 (单位 为 像素 ) 。 如 果 不 指定 这 两 个 属性 ，SVG 图 像 默 认 大 
小 是 300 像素 〈 宽 ) X150 像 素 (高 ) 。 

将 SVG 代码 直接 写 在 HTML 网 页 中 , 它 就 成 为 网 页 DOM 的 一 部 分 , 可 以 直接 用 DOM 进行 操作 ， 
例如 : 


<svg id="mysvg" 
xmlins="http://wWww.w3.0rg/2000/svg" 
viewBox="0 0 800 600" 
preserveAspectRatio="xMidYMid meet"> 
<circle id="mycircle" cx="400" cy="300" r="50"/> 
<svg> 


上 面 的 代码 插入 网 页 之 后 ， 就 可 以 使 用 CSS 定制 样式 。 代 码 如 下 : 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


circle{ 
stroke-width: 5; 
stroke: #f00; 
fill: #0; 


Circle:hover { 
stroke: #090; 
fill: #fff: 
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然后 ， 可 以 用 JavaScript 代码 操作 SVG， 代 码 如 下 : 


var mycircle = document.getElementByld(mycircle); 

mycircle.addEventListener('click", function(e) { 
console.log('circle clicked - enlarging'); 
mycircle.setAttribute('r’, 60); 

}, false); 


2. Alloylmage 图 像 处 理 库 


AlloyImage (AI) 是 一 个 基于 HTML5 的 JS 图 像 处 理 库 ， 集 成 了 一 些 方 便 、 快 捷 的 图 像 处 理 API。 
将 其 引用 到 网 页 中 ， 结 合 CSS3 等 技术 ， 可 做 出 一 些 之 前 无 法 实现 的 优美 效果 ， 或 提供 一 个 用 JS 编写 
的 在 线 图 像 处 理工 具 等 。 

设计 理念 

回 “接口 调用 简单 。 

回 ”提供 进一步 的 封装 组 合 效果 ， 方 便 调 用 。 

回 ”基于 AI 编写 的 AalloyPhoto， 完 整 展示 AI 的 能 力 和 接口 ， 以 及 调用 方法 Demo 展示 ， 更 易于 

学 习 。 

使 用 AlloyImage 时 ， 需 要 在 HTML 文件 中 引入 该 图 像 处 理 库 ， 然 后 在 JavaScript 脚本 代码 中 调用 

相关 方法 ， 并 设置 参数 。 常 见 调 用 方法 如 表 3.1 所 示 。 


表 3.1 Alloylmage 中 方法 及 其 说 明 


属 性 值 含义 
act0 对 单个 图 层 进行 效果 处 理 
add0 合并 一 个 图 层 到 本 图 层 上 去 
Show 将 当前 图 层 的 canvas 元 素 显示 出 来 
Teplace0 将 本 图 像 蔡 换 为 image 显示 
clone0) 复制 图 层 对 象 
View! 预览 模式 下 处 理 
excute0 执行 预览 模式 下 的 操作 
cancel0 取消 预览 模式 下 所 做 的 处 理 
ctx, 调用 原生 Canvas API 


20 


第 3 章 ”图像 和 超 链接 


例如 ， 如 果 对 图 像 进行 灰 度 处 理 ， 需 调用 act0 方 法 ， 语 法 如 下 : 
var grayPic = picTranseObj.act(" 灰 度 处 理 "); 


罗 说 明 : 在 actO 方 法 中 添加 不 同 的 参数 ， 可 实现 不 同 的 处 理 效果 。 
例如 ， 新 建 HIML 文件 ， 添 加 图 片 并 设置 ID， 引入 AlloyImage API 文 件 ， 关 键 代 码 如 下 : 


<div class="cont"> 
<p> 将 鼠标 悬 停 在 图 片上 ， 可 观看 图 片 灰 度 处 理 后 的 效果 </p> 
<img id="pic" src="img/view1.jpg" alt="" width="1000"/> 
</div> 


例如 ， 在 <head> 标 签 中 添加 <style> 标 签 ， 并 在 其 中 设置 页 面 样式 ， 关 键 代 码 如 下 : 


<style type="text/css"> 
.cont{ 
text-align: center; 
font: bold 25px/20px ™; 
margin: 40px auto; 
] 


</style> 
例如 ， 在 <div> 标 签 下 添加 <scrip 人 标签， 并 在 其 中 调用 相关 方法 对 图 像 进 行 灰 度 处 理 ， 代 码 如 下 : 


<script type="text/javascript"> 

var pics = document.getElementByld("pic"); 

pics.loadOnce(function () { 
var picTranseObj = psLib(this); /创建 一 个 psLib 对 象 
var origin = picTranseObj.clone(); /复制 原始 对 象 ， 作 为 原始 副本 
var grayPic = picTranseObj.act(" 灰 度 处 理 "); 
this.onmouseout = function (){ 

origin.replace(this); 


上 

this.onmouseover = function (){ 
grayPic.replace(this); 

} 


» 
实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 
1. 制作 购物 网 站 的 “促销 活动 ”页 面 >OoOoe@oe@ 
编写 程序 ， 输 出 如 图 3.1 所 示 的 “促销 活动 ”页 面 。 
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图 3.1 制作 购物 网 站 的 “促销 活动 ”页 面 


2. 使 用 图 像 标签 在 页 面 中 显示 图 书 封面 
编写 程序 ， 利 用 图 像 标签 实现 图 书展 示 功能 ， 即 在 页 面 中 


[od 【+ 


POOOOOO 


显示 多 本 图 书 的 封面 ， 如 图 3.2 所 示 。 
加 一 


Android 


从 人 门 到 精通 


从 


两 兆 湖 沙 性 已 NCET 


7。 


[> 


图 3.2 使 用 图 像 标签 显示 图 书 封面 


3. 制作 手机 商城 的 商品 展示 页 面 


POOOOOO 


编写 程序 ， 制 作 手 机 商城 的 商品 展示 页 面 ， 要 求 页 面 的 图 片 大 小 统一 ， 如 图 3.3 所 示 。 
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新 品 特价 


图 3.3 手机 商城 的 商品 展示 页 面 
.制作 图 书 导航 页 面 >Oooe@oe@ 


编写 程序 ， 制 作 图 书 网 站 首页 的 导航 菜单 和 宣传 图 片 ， 效 果 如 图 3.4 所 示 。 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


2 隐 网 下 国志 


轻松 圆 您 编程 梦 


图 3.4 图 书 网 站 的 导航 页 面 
， 展示 玫瑰 的 生长 过 程 Oooooe 
编写 程序 ， 在 网 页 中 通过 插入 图 片 的 方法 ， 展 示 玫瑰 的 生长 过 程 ， 效 果 如 图 3.5 所 示 。 


€ >》 CQ 在 6opgle 扫 过 ,项 才 狂 和 一 个 网 下 


玫瑰 的 生长 过 程 


图 3.5 玫瑰 的 生长 过 程 


第 3 章 ”图像 和 超 链接 


6. 布局 电脑 配件 页 面 POOOOOO 
编写 程序 ， 实 现 如 图 3.6 所 示 的 电脑 配件 页 面 效果 。 
= | 
中 图 片 位 置 与 对 并 方式 实现 
CC QQ «too 个 网 址 ©: 


© “= @ 
起 笔记 可 @ 
f » 
鹏 
\ epee © 二 


3.6 手机 商品 布局 页 面 
7. 为 图 书 添 加 替换 文本 和 提示 文字 POOOOOO 


编写 程序 ， 制 作 一 个 编程 图 书 的 介绍 页 面 ， 并 为 图 片 添加 蔡 换文 本 和 提示 文字 ， 如 图 3.7 所 示 。 


Java 是 一 门面 向 对 象 的 编程 语言 。Java 技 术 拥有 卓越 的 通用 性 、 高 效 性 和 平台 移植 性 等 ， 因 而 被 广泛 应 用 于 PC 
隧 、 游 戏 控制 台 等 ， 同 时 也 拥有 全 球 最 大 的 开发 者 专业 社 群 。android 应 用 大 部 分 是 使 用 java 语 言 开 发 的 ,所 以 
如 果 了 解 Java 的 基础 语法 以 及 面向 对 象 编程 的 话 ， 学 习 Android 梅 会 轻松 一 些 。 


Si] 


图 3.7 制作 图 书 介绍 页 面 
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8. 制作 商品 评价 页 面 ， 提 示 文 字 为 商品 信息 POOQOOOO 
编写 程序 ， 制 作 商品 评价 页 面 ， 设 置 图 片 的 提示 文字 为 商品 的 相关 信息 ， 如 图 3.8 所 示 。 


宝 由 详情 全 部 评价 猜 你 喜欢 


100 买 家 印象 
， 
‘ip 


全 从 (32) “好评 (32) 中 评 32) 雪 汪 (32 


© \ 前 天 买 的 ， 今 天 就 收 到 负 了 。 手 机 棒 棒 中 ,反应 很 快 ,客服 专 庶 还 下 级 好 ， 感 澳 实 家 送 的 手机 过, 


习 家 秀 : 
BD 不 得 不 说 ， 实 家 发 货 神 速 。 电 腕 配 壮 还 不 洪 ， 根 渍 意 的 一 次 网 购 ， 


买 家 秀 : 


图 3.8 商品 评价 页 面 


9. 使 用 链接 制作 网 站 的 导航 菜单 >Ooo@oooe 
编写 程序 ， 使 用 文本 链接 ， 制 作 网 站 的 导航 菜单 ， 效 果 如 图 3.9 所 示 。 


tasen -区 


| 


ior5oft-pyT01 SEIT/S NT /SCode /I/D nde Ne *e 


首页 “企业 简介 新 闻 ”核心 训 争 力 、 联 系 我 们 


同一 个 梦想 同一 个 使 命 


One dream one mission 


图 3.9 ”使 用 链接 制作 网 站 的 导航 菜单 
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10.“ 展 开 全 文 ”页 面 链 接 效果 POOOOOO 
编写 程序 ， 使 用 文本 链接 ， 制 作 网 页 中 “展开 全 文 ”页 面 ， 效 果 如 图 3.10 所 示 。 


HUAWEI 。 智 苞 手机 平板 电脑 穿 哉 设备 若 矢 家 居 ”联系 我 们 


名 iPhone 6[S 
唯一 的 不 同 ， 是 处 处 的 不 同 


Ag 艾 片 ”1200 万 像素 照片 ak 视频 


5.5 英 让 大 屏 享受 


大 二 全 六 


图 3.10 “展开 全 文 ”页 面 链 接 效 果 


训练 二 : 实战 能 力 强 化 训练 


11. 仿 淘宝 放大 镜 效 果 POOOOOO 
在 电 商 网 站 的 商品 详情 页 中 ， 常 常 附带 放大 镜 功能 ， 可 以 非常 方便 地 查看 商品 细节 。 


编写 程序 ， 模 拟 淘宝 的 放大 镜 功 能 。 如 图 3.11 所 示 ， 当 鼠标 光标 在 左 侧 图 片 中 移动 时 ， 图 片 中 会 
显示 一 块 半 透 明 区 域 ， 半 透明 区 域 中 的 内 容 会 放大 并 显示 在 右 侧 图 片 中 。 


货 发 售 
站 


华为 Mate8 现 
高 性 能 与 长 续航 的 再 一 


执 念 
站 HU 
= ) 
EH TT 4 


图 3.11 念 淘宝 放大 镜 效 果 
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12. SVG 实现 图 片 模糊 效果 POOOOOO 


HTMLS5 的 SVG 包含 多 种 滤 镜 ， 使 用 这 些 滤 镜 可 对 图 片 或 文字 设置 一 些 特殊 效果 。 

编写 程序 ， 使 用 高 斯 滤 镜 使 图 像 变 模糊 。 首 先 显示 一 张 模糊 的 图 片 ， 下 方 提示 高 斯 模糊 值 为 3， 如 
图 3.12 所 示 。 向 右 拖 动 滑 块 ， 将 增 大 模糊 值 ， 图 像 会 更 加 模糊 。 向 左 拖 动 滑 块 ， 图 片 将 变 清晰 。 将 滑 
块 拖 至 最 左 侧 ， 即 高 斯 模糊 值 为 0， 图 像 将 变 清晰 ， 如 图 3.13 所 示 。 
- 


aE 


设置 模糊 值 : 一 目 stdDeviation= 3 设置 模 衫 值 : 目 stdDeviation= 0 
图 3.12 高 斯 模糊 值 为 3 图 3.13 高 斯 模糊 值 为 0 
13. SVG 实现 点 赞 特效 POOOOOO 


编写 程序 ， 通 过 SVG 实现 朋友 圈 点 赞 特效 。 打 开 页 面 ， 可 看 到 一 条 朋友 圈 动 态 ， 如 图 3.14 所 示 。 
单 击 右 下 方 的 爱心 图 标 时 ， 爱 心 会 变 为 蓝 色 ， 同 时 爱心 周围 会 出 现 一 个 圆圈 ， 先 逐渐 放大 ， 又 逐渐 模 
糊 直 到 消失 ， 效 果 如 图 3.15 所 示 。 


朋友 图 朋友 国 
I A-YiTong W 国 A-YiTong W 侠 
飞机 坐 出 过 山 车 的 感觉 ! 优秀 ! 飞机 坐 出 过 山 车 的 感觉 ! 优秀 ! 
长 春 "长春 龙 嘉 国际 机 场 长 春 . 长春 龙 嘉 国际 机 场 
2 小 时 | 2 小 时 前 ” 全 
图 3.14 ”朋友 圈 动 态 图 3.15 点 赞 特效 
14. 应 用 Alloylmage 对 图 像 进行 灰 度 处 理 >Oooooe 


编写 程序 ， 对 图 像 进行 灰 度 处 理 。 打 开 图 片 ， 原 图 效果 如 图 3.16 所 示 。 当 鼠标 放置 在 图 片上 时 ， 
图 片 被 灰 度 处 理 ， 变 成 灰白 色 图 片 ， 如 图 3.17 所 示 。 当 鼠标 从 图 片上 离开 时 ， 图 片 又 恢复 为 彩色 。 

但 注意 : 本 任务 需要 在 火狐 浏览 器 或 者 IE11 以 上 的 版 本 中 运行 。 使 用 谷歌 浏览 器 时 ， 需 要 通过 
WebStorm 打开 谷歌 浏览 器 。 
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ee E 用- Ke 
图 3.16 原 图 


15. 应 用 Alloylmage 对 图 像 进行 反 色 处 理 Oooooe 


编写 程序 ， 对 图 像 进行 反 色 处 理 。 打 开 图 片 ， 原 图 效果 如 图 3.18 所 示 。 单 击 图片 ， 可 看 到 图 像 被 
反 色 处 理 后 的 效果 ， 如 图 3.19 所 示 。 

者 注意 : 本 任务 需要 在 火狐 浏览 器 或 者 IE11 以 上 的 版 本 中 运行 。 使 用 谷歌 浏览 器 时 ， 需 要 通过 
WebStorm 打开 浏览 器 。 


图 3.18 原 图 图 3.19 对 图 像 反 色 处 理 后 的 效果 


第 4 章 ， CSS3 概述 


本 章 训 练 任务 对 应 核心 技术 分 册 第 4 章 “CSS3 概述 ”部 分 。 
何 ”重点 练习 内 容 : 


理解 CSS 在 页 面 中 的 作用 。 

掌握 CSS 的 基本 语法 、 常 用 属性 。 
使 用 CSS 美 化 文本 、 图 像 等 内 容 。 
通过 CSS 在 页 面 中 设置 动画 效果 。 


和 本 妈 名 


应 用 技能 拓展 学 习 
1. Velocityjs 框架 


Velocityjs 是 一 个 简单 、 易 用 、 高 性 能 、 功 能 丰富 的 轻 量 级 JS 动画 库 ， 其 官方 网 站 下 载 地 址 是 
http://velocityjs.org/。 它 能 与 jQuery 完美 协作 ， 并 和 $.animate0 有 着 相同 的 API。 同 时 ， 它 不 依赖 于 
jQuery， 可 单独 使 用 。 

Velocity 不 仅 包含 了 $.animate() 的 全 部 功能 ， 还 拥有 颜色 动画 、 转 换 动 画 (transforns)、 循 环 、 绥 
动 、SVG 动画 、 滚 动 动画 等 特色 功能 。 

下 面 的 代码 中 就 调用 了 Velocityjs 框架 。 


<body> 
<!-- dom -> 
<div class="element"></div> 
<script src="https://cdn.jsdelivr.net/Inpm/jquery@3.1.0/dist/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/Inpm/velocity-animate@1.5.0/velocity.min.js"> </script> 
<script> 

$(".element").velocity({ 

left: "200px" 
}b{ 


duration: 450, 
delay: 1000 
六 
// $.animate() 的 写法 ， 效 果 同 上 
$(".element").delay(1000).velocity({left: "200px"}, 450); 
</script> 
</body> 


2. 活用 position 属性 


在 训练 16 中， 用 到 了 CSS 中 的 position 属性 。 

该 实例 中 ， 通 过 数组 存放 图 片 轮 播 时 5 张 图 片 的 宽度 、 高 度 、 透 明度 、 位 置 以 及 优先 级 信息 ， 
当 鼠 标 单 击 向 左 或 向 右 按 钮 时 ,依次 改变 图 片 的 大 小 位 置 以 及 透明 度 等 样式 。 实现 相 册 图 片 的 切换 
效果 。 

改变 透明 度 通过 opacity 实现 ， 其 语法 如 下 : 


opacity: number 


需要 说 明 的 是 ，number 为 指定 对 象 的 不 透明 度 ， 其 取 值 范围 为 00 一 1.0。 
实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 
1. 制作 一 个 简单 的 注册 /登录 页 面 >Ooo@oo@oe@ 


浏览 网 站 时 ， 通 常 需要 注册 或 登录 账号 。 编 写 一 个 简单 的 注册 /登录 页 面 ， 并 通过 CSS 美化 页 面 内 
FF， 效果 如 图 4.1 所 示 。 


2. 制作 网 页 版 个 人 简历 POOOOOO 


> 


尝试 为 自己 制作 一 份 网 页 版 个 人 简历 ， 然 后 通过 CSS 美化 简历 ， 效 果 如 图 4.2 所 示 。 
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图 4.1 简单 的 注册 /登录 页 面 图 4.2 网 页 版 个 人 简历 
3. 制作 网 页 版 生日 贺卡 >Oooooe 
小 张 生日 快 到 了 ， 帮 他 制作 一 个 网 页 版 生日 贺卡 ， 效 果 如 图 4.3 所 示 。 


图 4.3 网 页 版 生日 贺卡 
4. 制作 网 页 版 宣传 海报 POoOOOOO 
李 先 生 新 开 一 家 手机 店 ， 为 他 设计 一 个 新 店 开张 宣传 海报 页 面 ， 效 果 如 图 4.4 所 示 。 


人 
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殉 飞 手机 开业 号 ! 
开业 期 间 ， 优 圳 重重 


图 4.4 网 页 版 宣传 海报 
5. 制作 购物 商城 的 商品 展示 页 面 POOOOOO 


制作 购物 商城 的 商品 展示 页 面 ， 效 果 如 图 4.5 所 示 。 当 鼠标 放置 在 商品 上 时 ， 图 片 放大 。 另 外 ， 需 
要 设置 不 同 状态 下 的 超 链 接 字体 颜色 。 


[一 > i = : WN | EZ 
| | ! 
| | | 晤 | 
| | | 
Is | i | | 
Sy | (= | | 2 
| | | 
vivo Xe Plus vivoxgpus | vivo x9 plus vivo X9 plus 
2499 : 2499 ! 2499 : 2969 
950 : a 970 i 480 : s 760 


图 4.5 手机 展示 页 面 
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6. 制作 手机 介绍 页 面 POOOOOO 


制作 一 个 手机 的 宣传 介绍 页 面 ， 效 果 如 图 4.6 所 示 。 
(提示 : 设置 网 页 中 第 一 行文 字 以 及 第 二 行 第 一 个 文字 的 样式 ) 


盖 乐 世 J3 2017 


后 豆 1300 万 信守 F19 大 光 面 

硬件 更 强大 软件 更 保 潜 

芋 乐 世 有 3 2017 在 扳 担 性 的 上 进行 了 大 帐 提升 。 后 于 摄 
像 头 捉 升 至 1300 万 像素 ， 呈 现 更 多 精 于 细节 ; 而 F1.9 
大 光 图 ， 更 可 让 你 在 瞳 光 环境 下 拍摄 自如 。 在 硬件 之 
外 ， 浮 动 快 门 、 快 速 页 面 切换 的 便捷 功能 ， 更 直 你 在 拍 
所 中 得 心 应 手 。 


图 4.6 手机 介绍 页 面 
7. 制作 个 人 空间 主页 POOOOOO 


尝试 编写 一 个 个 人 空间 主页 ， 并 使 用 CSS 美化 它 ， 效 果 如 图 4.7 所 示 。 


| \ 
| 
oD 我 的 主页 十 一 说 说 留言 板 相册 时 光山 


HP 情 

我 的 闫 最 (90 ) oo 全 和 B 吉 (90) 
我 在 较 污 9) 个 人 B 术 (20) 
9010) 转发 B 二 7] 
我 的 游戏 (2) 我 的 相同 手机 日 志 (40 ) 
9 条 (50) 涝 戏 分 享 (19 ) 
Bcigl 4 pv mii(120 
二 (5) NU \ 心 请 说 (90 ) 
最 新 上 映 图 片 说 说 (53 ) 


决赛 苍 国 1-0 阿 根 迁 7 


图 4.7 个 人 空间 主页 
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8. 实现 页 面 横幅 广告 效果 >oOog@oooe@ 


编写 程序 ， 实 现 手机 商城 首页 的 横幅 广告 效果 ， 如 图 4.8 所 示 。 
(提示 : 使 用 背景 以 及 文本 的 相关 属性 ) 
mr 二 志 = Ei) 


0 Er x 著 


CC 。 Qa EEGoogle 中 接 索 , 观 志 纺 人 一个 癌 生 e 


其 [] 品 身 


二 | 闻 果 | 抱 区 | 华 为 


| 
13 夺 | 


价格 预算 


1500BAm | 1500-2500 1 2500 
—350013500BL 上 | 


网 络 类 型 

共 动 | 赔 囊 | 电 集 | 全 网 通 | 
存储 容 品 
166132616461128G1 


图 4.8 首页 机 由 广告 效果 
9. 制作 购物 商城 的 “ 热 销 爆 款 ” 页 面 >Oooeoeoe@ 


制作 购物 商城 首页 中 的 “ 热 销 爆 款 ”页 面 ， 如 图 4.9 所 示 。 
换季 换 新 机 


揭秘 ,水瓶 座 的 你 最 适 


合 哪 款 手机 ? 


图 4.9 “ 热 销 爆 款 ” 页 面 
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10. 制作 购物 商城 的 “精品 手机 ”页 面 PooOOOOO 
编写 程序 ， 制 作 手 机 商城 的 “精品 手机 ”页 面 ， 效 果 如 图 4.10 所 示 。 
[sls mE 
中 手柄 件 x%+ 
C Q 在 将 壶 者 委 日 : 
精品 手机 手机 电源 保护 壳 / 膜 存储 /自拍 杆 
7” 
十 核 八 核 四 核 
四 核 双核 四 、 单 校 rh 加 级 区 


斯 值 之 奋 , 双 拔 之 星 ¥ 1500, 00 ， ¥ 15004 00 ¥ 3800 00” 


ppo R9 尾 于 你 的 高 颜 什 手 vivo Xplay 票 光 
¥2500.00 ¥5300.00 
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图 4.10 “精品 手机 ”页 面 


11. 制作 网 站 登录 页 面 POOOOOO 


编写 程序 ， 制 作 51 购 商 城 的 登录 页 面 ， 效 果 如 图 4.11 所 示 。 
(提示 : 添加 一 张 背景 图 片 ) 


更 多 移动 后 襄 新 体验 i 更 多 移 语 诡 新 体验 
称 说 ,我 做 a 称 涪 ,我 做 


图 4.11 网 站 登录 页 面 
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12. 制作 手机 展示 页 面 POOOOOO 


编写 程序 ， 实 现 手机 商城 的 多 款 手机 展示 页 面 ， 如 图 4.12 所 示 。 
(提示 : 使 用 背景 图 片 和 文字 的 相关 属性 ) 


HUA/WEI 华 为 HUA/WEI 华为 
P9 mate9 


i 格 : ¥3300.00 4G 全 网 通 为 mate9 全 网 高 配 
9 系列 24 小 时 内 发 
全 网 通 手机 高 配 


HUAWEL/ 华 为 HUAWEL/ 华 为 
MATE9 PRO MATE8 


4GB+64G 全 网 通 手机 MATE9 | 华为 MATE8 移 动 版 4G 手 机 6.0 英 二 


图 4.12 手机 展示 页 面 
13. 华为 手机 详情 页 面 DOOOOOO 


编写 程序 ， 实 现 华 为 手机 详情 页 面 ， 如 图 4.13 所 示 。 
(提示 : 使 用 列表 标签 实现 ) 
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华为 honor 荣 浴 畅 玩 5A 移 Huawei/ 华 为 P9 全 网 通 正品 华为 /honor 荣 痉 疡 玩 
动 版 4G 大 屏 手 机 5.2 英 十 大 屏 手机 


¥689 ¥2199 ¥569 


华为 honor/ 荣 秦 畅 玩 7X 全 ， 64G 高 配 版 Huawei/ 华 为 3GB+32GB 全 网 透 入 卡 双 
画 屏 Mate8 摄像 头 


¥1699 ¥2028 ¥2188 
图 4.13 商品 详情 页 面 
14. 手机 产品 参数 页 面 


【正品 】 华 为 /honor 荣 次 
声 玩 5A 全 网 通 


¥739 


32G 全 网 通 华 为 /Huawei 畅 
玩 5C 


羊 1049.00 


POOOOOO 


编写 程序 ， 制 作 购物 网 站 中 某 款 手机 的 产品 参数 页 面 ， 效 果 如 图 4.14 所 示 。 


(提示 : 使 用 列表 标签 实现 ) 


® 
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《> CQ E500gle 中 诺 农 , 王 寺 党 和 一 个 网 往 


处 理 吕 与 内 存 


图 4.14 产品 参数 页 面 


训练 二 : 实战 能 力 强 化 训练 
15. 图 片 跑马 灯 效 果 POOOOOO 
以 深 动 方式 显示 图 片 ， 实 现 图 片 跑马 灯 效 果 ， 如 图 4.15 所 示 。 页 面 加 载 完毕 后 ， 图 片 自动 向 右 滚 


动 ; 单 击 向 左 滚动 按钮 4， 图 片 向 左 深 动 : 单 击 向 右 深 动 按钮 >， 图 片 继续 向 右 滚动 :鼠标 悬 停 在 图 片 
上 时 ， 图 片 停止 滚动 。 


不 一 样 的 视觉 体验 


MON 


本 享 健康 生活 ! 


LE 


图 4.15 图 片 跑马 灯 效 果 
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16. 相册 内 图 片 单 击 轮换 效果 POOQOOOO 


实现 相册 内 图 片 单 击 轮换 效果 。 显 示 5 张 图 片 ， 两 侧 各 有 一 个 圆 形 的 半 透 明 按钮 ， 以 控制 图 片 向 
左 或 向 右 进行 切换 。 当 鼠标 指针 悬 停 圆 形 按钮 上 时 ， 如 悬 停 在 右 侧 按钮 上 ， 该 按钮 不 再 透明 。 单 击 右 
侧 按钮 ， 图 片 会 逆 时 针 依 次 移动 一 个 位 置 ; 单 击 左 侧 按钮 ， 图 片 可 顺 时 针 依 次 移动 一 个 位 置 。 实 现 效 
果 如 图 4.16 所 示 ， 


Python 
从 入 门 到 项 目 实践 


图 4.16 相册 切换 效果 
17， 图形 加 载 动画 POOOOOO 


浏览 网 页 时 ， 难 免 会 遇 到 页 面 加 载 缓慢 的 情况 。 为 避免 网 页 长 时 间 空 白 ， 可 以 显示 一 些 简单 的 动 
画 。 实 现 一 个 圆 形 加 载 动画 ， 如 图 4.17 所 示 ， 页 面 加 载 过 程 中 弧 形 一 直 转动 ， 直 至 页 面 加 载 完 成 。 
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4.17 圆 形 加 载 动画 
18. 制作 方块 填充 的 进度 条 PooOOOOO 
下 载 或 安装 软件 过 程 中 ， 经 常会 看 到 各 类 进度 条 ， 最 常见 的 就 是 如 图 4.18 所 示 的 进度 条 。 试 着 实 
现 这 样 的 进度 条 ， 随 着 下 载 或 安装 进行 ， 绿 色 方 块 区 逐渐 变 长 ， 当 进度 达到 100% 时 ， 进 度 条 完全 被 
充满 
ITI 
图 4.18 方块 填充 的 进度 条 
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本 章 训练 任务 对 应 核心 技术 分 册 第 5 章 “CSS3 高 级 应 用 ”部 分 。 
个 重点 练习 内 容 :; 


. 掌握 CSS3 中 的 常用 的 选择 器 。 

.使 用 CSS3 设 置 网 页 的 背景 颜色 以 及 背景 图 像 。 
。 熟练 掌握 金 模型 。 

。 灵活 使 用 position、 浮 动 。 

.使 用 CSS 中 的 变形 、 过 渡 以 及 动画 。 


wm wb 一 


应 用 技能 拓展 学 习 


1. 伪 类 选择 器 的 应 用 


浏览 网 页 时 ， 经 常会 看 到 一 些 特殊 样式 在 鼠标 悬 停 、 单 击 、 获 取 焦点 时 触发 。 设 置 这 些 样式 需要 
使 用 以 下 4 个 伪 类 选择 器 。 
:link : 表示 对 未 访问 的 超 链接 应 用 样式 。 
:visited : 表示 对 已 访问 的 超 链接 应 用 样式 。 
回 :hover : 表示 对 鼠标 悬 停 的 元 素 应 用 样式 。 
回 :active : 对 用 户 正在 单 击 的 元 素 应 用 样式 。 
使 用 伪 类 选择 器 时 ， 需 要 注意 两 点 : 
回 伪 类 选择 器 的 顺序 必须 正确 。 如 果 不 正确 ， 将 无 法 正确 应 用 样式 。 正 确 顺 序 是 :hover 
在 :link、:visited 之 后 ，:active 在 :hover 之 后 。 
:link 和 :visited 只 能 用 于 超 链接 ， 不 能 用 于 其 他 元 素 。 
例如 ， 在 网 页 中 添加 一 个 导航 菜单 ， 并 为 菜单 分 别 设置 未 访问 、 已 访问 、 悬 停 以 及 单 击 时 的 样式 ， 
其 关键 代码 如 下 : 
<style type="text/css"> 
ullia:link{ A* 未 访问 时 的 超 链接 样式 */ 


color: black; 
text-decoration: none; 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


ullia:visited { 
color: red; 


/已 访问 的 超 链 接 样 式 */ 


} 
ullia:hover { 
color: #fff: 
background: #35ccc7; 
} 
ul lia:active { 
text-decoration: underline; 
1 
</style> 
<ul> 
<li><a href="../05/index.html"> 首 页 </a></li> 
<li><a href="../06/index.html"> 果 蔬 生 鲜 </a></li> 
<li><a href="../07/index.html"> 户 外 运动 </a></li> 
<li><a href="../08/index.html"> 手 机 数码 </a></li> 
</ul> 


上 述 代码 的 实现 效果 分 别 如 图 5.1~ 图 5.4 所 示 。 


首页 ”果蔬 生 鲜 户外 运动 手机 数码 首页 
图 5.1 被 访问 时 
首页 户外 运动 ”手机 数码 首页 
图 5.3 单 击 链接 时 


. 弹性 布局 (flexbox) 的 使 用 


/鼠标 悬 停 时 的 超 链接 样式 */ 


A/* 正 在 单 击 时 的 超 链接 样式 */ 


户外 运动 ”手机 数码 
图 5.2 ”鼠标 悬 停 时 
果蔬 生 鲜 。 ”户外 运动 。 手机 数码 
图 5.4 访问 后 


网 页 布局 是 CSS 的 一 个 重点 应 用 ， 传 统 的 布局 依赖 于 display+position+float， 弹 性 布局 是 CSS3 中 
一 种 新 的 布局 方式 ， 使 用 这 种 布局 的 元 素 被 称 为 弹性 容器 (flex-box) ， 其 所 有 子 元 素 会 自动 成 为 弹性 
项 目 (flex-item) 。 


(1) 容器 主轴 方向 


弹性 容器 存在 两 根 轴 一 一 主轴 和 侧 轴 。 默 认 情 况 下 ， 主 轴 方 向 为 水 平 向 右 , 侧 轴 方 向 为 垂直 向 下 。 

可 通过 flex-direction 属性 修改 主轴 方向 。 

回 row: 默认 值 ， 表 示 主 轴 方 向 为 水 平 向 右 ， 侧 轴 方 向 为 垂直 向 下 ， 如 图 5.5 所 示 。 
row-reverse: 表示 主轴 方向 为 水 平 向 左 ， 侧 轴 方 向 为 垂直 向 下 ， 如 图 5.6 所 示 。 


回 
回 column: 表示 主轴 方向 为 垂直 向 下 ， 侧 轴 方 向 为 水 平 向 右 ， 如 图 5.7 所 示 。 
回 column-reverse: 表示 主轴 方向 为 垂直 向 上 ， 侧 轴 方 向 为 水 平 向 右 ， 如 图 5.8 所 示 。 
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图 5.5 ”row 排列 图 5.6 ”row-reverse 排列 5.7 column 排列 图 5.8 ”column-reverse 排列 
(2) 容器 属性 
除了 主轴 方向 以 外 ， 容 器 还 有 以 下 属性 。 
flex-wrap: 当 项 目 不 能 完全 显示 在 一 行 中 时 ， 是 否 换行 以 及 如 何 换行 ， 由 以 下 3 个 属 值 决定 。 
> no-wrap: 项 目 不 换行 。 
> wrap: 换行 ， 从 上 往 下 换行 ， 即 第 一 行 在 最 上 方 。 
> ”wrap-reverse: 换行 ， 从 下 往 上 换行 ， 即 第 一 行 在 最 下 方 。 
flex-flow: flex-direation 和 flex-wrap 的 简写 ， 其 语法 如 下 : 
flex-flow: flex-direction flex-wrap 


justify-content: 设置 项 目 在 主轴 上 的 对 齐 方式 。 共 有 5 个 属性 值 ， 其 值 及 表示 的 对 齐 含 义 如 
图 5.9 所 示 。 


flex-start center flex-end space-around 


图 5.9 justify-content 属性 值 
align-items: 表示 项 目 在 侧 轴 上 的 对 齐 方式 。 同 样 有 5 个 属性 值 ， 其 值 及 表示 的 对 齐 含义 如 
图 5.10 所 示 。 


?tr flex-end 
HH Oro Hom | 


图 5.10 align-items 属性 值 
align-content: 弹性 盒 中 拥有 多 行 项 目 时 ， 用 于 设置 行 的 对 齐 方式 。 如 果 只 有 一 行 项 目 ， 那 么 
该 属性 值 无 效 。 其 主要 有 6 个 属性 值 ， 其 值 及 表示 的 对 齐 含义 如 图 5.11 所 示 。 


5.11 align-content 属性 值 


(3) 项 目 属性 
此 外 ， 还 可 以 通过 项 目 属性 自 定义 项 目 在 侧 轴 上 的 对 齐 方 式 、 项 目的 排列 顺序 等 。 项 目的 具体 属 
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性 如 下 。 
回 align-self: 自 定义 某 个 项 目 在 侧 轴 上 的 对 齐 方式 ， 其 属性 值 及 含义 与 align-items 相同 。 
回 flex-grow: 定义 项 目的 放大 比例 。 默 认 值 为 0， 表示 即使 有 剩余 空间 ， 也 不 放大 项 目 。 
回 flex-shrink: 定义 项 目的 缩小 比例 。 默 认 值 为 1， 表 示 当 空间 不 足 时 ， 缩 小 项 目 以 适应 整个 
回 flex-basis: 弹性 项 目 分 配 多 余 空 间 前 所 占 的 主轴 空间 。 
回 flex: flex-grow、flex-shrink 以 及 flex-basis 的 缩写 。 其 语法 如 下 : 
flex: flex-grow flex-shrink flex-basis 


回 order。 定义 项 目的 排列 顺序 ， 其 属性 值 为 具体 数字 。 数 字 越 小 ， 排 列 越 年 前 。 
实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 
1. 制作 手机 商城 的 “精品 配件 ”页 面 >Oooooe@ 


网 购 是 非常 受 年 轻 人 青睐 的 一 种 购物 方式 。 如 图 5.12 所 示 为 手机 商城 的 “精品 配件 ”页 面 ， 使 用 
HTML 和 CSS 完成 该 页 面 。 


精品 配件 更 多 瑟 机 / 音 条 保护 过 / 保 扩 骤 充电 器 / 数 结 


图 5.12 “精品 配件 ”页 面 
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2. 制作 开心 消 消 乐 网 站 的 “最 新 活动 ”页 面 PooOOOOO 
开心 消 消 乐 是 一 


款 老 少 皆 宜 的 休闲 游戏 。 尝 试制 作 游戏 网 站 中 的 “最 新 活动 ”页 面 ， 如 图 5.13 
所 示 。 


最 新 活动 


【开心 消 消 乐 】 那 ! 暴 击 时 间 到 ! 
空间 入 品 【 港 戏 新 系统 】 荫 免 周 赛 ， 等 你 抄 战 1 


游戏 论坛 【更 新 ] 201 4 年 ! 月 9 日 更 新 内 容 
RS 【论坛 活动 】 拜年 话 大 征集 ! 送 你 上 头条 ! 
游戏 博客 【 浇 戏 新 活动 】 碟 幻 马戏 团 ， 通 其 等 价 草 ! 
【论坛 活动 】 儿 时 玩乐 黑 片 大 征集 ! 


图 5.13 开心 消 消 乐 网 站 的 “最 新 活动 ” 页面 
3. 制作 小 米 Max 2 手机 宣传 页 面 POOOOOO 


手机 的 更 新 速度 越 来 越 快 ， 如 图 5.14 所 示 为 小 米 Max 2 上 市 时 宣传 页 面 的 一 部 分 ， 试 着 完成 这 个 
页 面 。 


着 视频 、 玩 游戏 、 看 电子 书画 面 更 大 


图 5.14 小 米 Max2 手机 宣传 页 面 


4. 实现 手机 分 类 筛选 页 面 POOOOOO 


电 商 网 站 ， 为 了 方便 用 户 能 快速 找到 自己 所 需 的 东西 ， 其 商品 列表 页 面 中 通常 会 设置 一 些 条 件 得 
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选项 。 如 图 5.15 所 示 为 一 个 手机 页 面 的 分 类 筛选 项 ， 请 实现 该 页 面 。 


品牌 : 

" SPPo 团 小 米 此 nuwe ihonor VivoO 
分 类 手机 

网 络 类 型 移动 ”联通 电信 全 网 通 

机 身 内 存 RAM 16G 326 646 128G 


图 5.15 “手机 分 类 和 选项 
5. 制作 新 增收 货 地 址 页 面 POOOOOO 


网 购 中 ， 选 择 好 商品 后 ， 需 要 选择 或 添加 收 货 地 址 ， 为 下 一 步 支付 做 准备 。 如 图 5.16 所 示 就 是 一 
个 添加 收 货 地 址 的 页 面 ， 试 着 实现 这 个 页 面 。 


新 增收 货 地 址 


所 在 地 区 : 


详细 地 址 : 


邮政 编码 : 


收 货 人 姓名 : 


收 货 人 电话 : 


是 否 允 许 代 收 : @ 是 日 否 


图 5.16 新 增收 货 地 址 页 面 
.制作 商品 详情 页 的 产品 规格 部 分 POOOOOO 
编写 程序 ， 制 作 商 品 详情 页 的 产品 参数 与 规格 部 分 ， 效 果 如 图 5.17 所 示 。 


O) 
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颜色 ， 人 物 印花 


上 衣 门 襟 ， 单 排 扣 


尺码 ，S,，K 衣 长 : 30-40cm 版 型 :宽松 
下 摆 : 敞 口 季节 ， 夏季 材质 ， 其 他 
领 型 ， 圆 领 潮流 : 日 系 风格 : 通勤 (0L) 


图 5.17 商品 详情 页 的 产品 参数 部 分 


7. 制作 手机 商城 中 “主题 购 ” 页 面 POOOOOO 
如 图 5.18 所 示 为 电子 商城 中 的 “主题 购 ” 页 面 ， 尝 试 完成 这 个 页 面 。 
主题 购 

tL 精 为 老人 机 

因 爱 寓 在 低 至 99 元 
国 

移动 营业 厅 

充 话费 送 好 礼 

Lo | 加 


图 5.18 “主题 购 ” 页 面 
8. 制作 一 个 简单 的 横向 导航 栏 >oOoe@oooe 
编写 一 个 简单 的 横向 导航 栏 ， 当 鼠标 指针 悬 停 在 某 个 菜单 项 上 时 ， 该 菜单 项 会 自动 添加 背景 颜色 ， 


效果 如 图 5.19 所 示 。 
(提示 : 使 用 背景 以 及 文本 相关 属性 ) 
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不 一 样 的 视觉 体验 


，SUHD 超 高 清 


， 曲面 电视 Ks8800 
， 诠释 亮度 水 平 
* 要 棚 如 生 的 色彩 体验 


图 5.19 简单 导航 栏 
9. 制作 含 二 级 菜单 的 横向 导航 栏 >Ooo@oooe 


当 导 航 内 容 较 多 时 ,为 了 节省 空间 ,通常 会 设置 多 级 导航 菜单 ,将 一 部 分 内 容 折 和 县 起 来 。 如 图 5.20 
所 示 为 一 个 横向 二 级 导航 菜单 页 面 ， 当 鼠标 指针 悬 停 在 一 级 菜单 项 上 时 ， 会 自动 展开 二 级 子 菜单 项 ， 
请 编程 实现 该 页 面 。 
爱 旅游 首页 a 周边 。 关于 我 们 


Love travel 


图 5.20 横向 导航 栏 


10. 制作 含 二 级 菜单 的 侧 边 导 航 栏 POOOOOO 


侧 边 导航 也 是 一 种 比较 常见 的 导航 方式 , 其 导航 菜单 是 竖 向 的 , 子 菜单 也 同步 向 右 展开 。 如 图 5.21 
所 示 为 某 电 商 网 站 中 当 鼠 标 悬 停 在 第 5 项 菜单 上 时 展开 的 子 菜单 效果 。 请 编程 实现 这 个 页 面 。 


到 
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生 鲜 团购 全 球 购 


锅巴 


海鲜 味 


花茶 / 果 茶 


品牌 /礼包 


图 5.21 含 二 级 导航 菜单 的 侧 边 导航 栏 
11. 旋转 风车 效果 POOOOO© 


制作 一 个 旋转 风车 页 面 ， 当 鼠标 指针 悬 停 在 风车 上 时 ， 风 车 开始 旋转 ， 效 果 如 图 5.22 所 示 。 
(提示 : 旋转 效果 中 ， 通 过 transform-orgin 属性 为 旋转 对 象 设置 旋转 中 心 点 ) 


图 5.22 旋转 风车 效果 
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12.， 自动 拼图 动画 效果 POOOOOO 


编写 程序 ， 实 现 自动 拼图 的 动画 效果 。 打 开 页 面 时 ， 若 干 图 片 散乱 地 显示 在 页 面 中 ， 如 图 5.23 所 
示 。 当 鼠标 放置 在 任意 一 张 图 片上 时 ， 所 有 图 片 会 自动 组 合 为 一 张 完整 图 像 ， 如 图 5.24 所 示 。 
(提示 : 通过 定位 position 以 及 旋转 等 效果 实现 图 像 拼接 前 的 位 置 ， 通 过 CSS3 中 的 过 渡 属 性 实现 
图 像 自动 拼接 过 程 ) 


| 
对 图 


图 5.23 图 片 散 乱 显示 图 5.24 拼图 效果 
13. 鼠标 光标 滑 过 时 的 平移 特效 POOOOOO 


编写 程序 ， 实 现 电 子 商 城中 当 鼠 标 光标 滑 过 商品 时 ， 商 品 逐 次 平移 的 页 面 效果 ， 如 图 5.25 
所 示 。 


图 5.25 鼠标 光标 滑 过 时 的 平移 特效 
14. 鼠标 悬 停 时 展开 和 放大 相册 >Oooo@oe@ 


编写 程序 ， 制 作 一 个 网 页 版 相册 。 当 鼠标 悬 停 在 相册 上 时 ， 相 册 展 开 ; 鼠标 再 次 悬 停 在 照片 上 时 ， 
照片 逐渐 放大 ， 如 图 5.26 所 示 。 
(提示 : 通过 伪 类 选择 器 可 以 实现 所 标 悬 停 特效 ) 
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图 5.26 网 页 版 相册 
15. 旅游 网 站 图 片 轮 播 效果 PoOOOOOO 
编写 程序 ， 实 现 图 片 依次 向 左轮 流 播放 的 页 面 效 果 ， 如 图 5.27 所 示 。 
(提示 : 通过 animation 实现 轮 播 图 动画 ) 


爱 旅游 . 
fove travel 首页 景区 门票 机 村 路 况 周边 


图 5.27 图 片 轮 播 效果 


16. 广告 页 面 文字 滚动 显示 效果 >Oooooe@ 


编写 程序 ， 实 现 网 站 中 文字 滚动 显示 的 页 面 效 果 ， 如 图 5.28 所 示 。 
(提示 : 通过 animation-dalay 属性 设置 动画 延长 时 间 ， 使 得 广告 按 顺序 滚动 显示 ) 
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Wb huawel 


最 亮 的 星 

vivo X9 和 柔 光 拍 照 
华为 PI0 plus 量 身 为 你 定制 
红 米 局 超 长 待机 为 你 续航 
乐 视 直 供 乐 pro3 精英 版 


图 5.28 广告 中 文字 滚动 显示 效果 


训练 二 : 实战 能 力 强 化 训练 
17.， 实现 凸显 图 片 效果 >ooooooe 
实现 一 个 画廊 图 片 效果 ， 如 图 5.29 所 示 。 夯 廊 中 的 图 片 整齐 排列 ， 却 又 很 模糊 ， 当 鼠标 晤 停 在 某 


张 图 片上 时 ， 该 图 片 会 逐渐 变 清晰 。 
(提示 : 调整 图 片 清晰 度 ， 可 使 用 CSS3 中 的 opacity 属性 实现 ， 其 值 为 0~1 的 小 数 ) 


图 5.29 画廊 图 片 效果 
18， 实现 文字 水 波纹 效果 >Oooooe@ 


浏览 网 页 时 ， 常 会 看 到 各 种 各 样 的 文字 特效 。 试 着 通过 多 个 动画 组 合 ， 实 现 如 图 5.30 所 示 的 文字 
水 波纹 效果 。 
(提示 : 使 用 CSS 的 background-clip 属性 实现 ) 


% 
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1 月 八大 合 ， 八 f 人 出 i up 
图 5.30 文字 水 波纹 效果 


19. 实现 邮件 订阅 中 心 页 面 POOQOOOO 
每 天 打开 手机 ， 看 看 娱乐 新 闻 或 推送 的 文章 ， 已 成 为 多 数 年 轻 人 的 习惯 。 有 的 人 喜欢 订阅 一 些 邮 
件 ， 每 早 收 到 一 些 感 兴趣 的 推荐 和 资讯 。 如 图 5.31 所 示 就 是 通过 弹性 布局 实现 的 邮件 订阅 中 心 页 面 


当 页 面 内 容 缩小 到 无 法 装 下 一 整 行 内 容 时 ， 页 面 中 的 项 目 就 会 分 两 行 排列 ， 如 图 5.32 所 示 ， 请 尝试 实 
现 该 页 面 。 


热门 分 类 
2 < 
汪 蔚 蝶 
热门 分 类 Ss se 
电 世 过 区 汪 
该 荐 
休 末 游戏 体育 a 人 
乐 ， 这 消 等 坟 戏 区 上 至 ee 插花 人 生 笑 味 集 家 广 精 先 
全 依依 食 食 会 食 wn 
最 受 欢迎 


订阅 预览 订阅 预览 订阅 预览 


加 围 图 四 加 
插花 人 生 美味 集 ps 心理 学 微 视频 美文 分 享 心理 学 微 视频 美文 分 享 


育 育 诊 人 寅 寅 人 痛 诊 育 诊 请 俩 宽 帘 袖 食 病 高 俩 人 视 。 究 禄 请 袜 


育 请 | 
订阅 预览 订阅 预览 订阅 预览 订阅 预 筑 订阅 预览 订阅 预览 订阅 预览 


帘 窒 育 诊 诊 


订阅 预览 订阅 奥 


图 5.31 邮件 订阅 中 心 
20. 制作 红包 兑换 页 面 


图 5.32 分 两 行 显示 


POOOOOO 


在 淘宝 、 美 团 等 APP 上 签到 或 消费 后 ， 经 常会 有 发 红包 、 领 红包 活动 ， 参 与 即 可 领取 一 些 优惠 券 。 
试 着 用 弹性 布局 制作 一 个 兑换 红包 页 面 ， 效 果 如 图 5.33 所 示 。 


21. 制作 360 每 日 趣闻 页 面 POOOOOO 


安装 过 360 的 人 都 知道 ， 每 天 一 打开 电脑 ， 就 会 弹出 一 个 推送 页 面 ， 涵 盖 脑 筋 急 转 弯 、 最 新 资讯 、 
游戏 等 信息 。 如 图 5.34 所 示 就 是 通过 弹性 布局 实现 的 一 个 仿 360 的 每 日 趣闻 页 面 , 尝试 完成 这 个 页 面 。 


of 
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话 梅 、 杨 梅 、 草 莓 选 美 
(Re 如 果 话 梅 、 草 等 、 疡 梅 是 和 的 话 ， 籽 们 谁 的 打扮 最 不 


图 533 ”红包 竞 换 页 面 图 5.34 360 每 日 趣闻 页 面 
22. 实现 跳动 文字 效果 POOOOO© 


编写 程序 ， 实 现 文字 在 页 面 中 上 下 跳动 的 动画 ， 效 果 如 图 5.35 所 示 。 
mingrisoft 


5.35 ”跳动 的 文字 
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本 训练 任务 对 应 核心 技术 分 册 第 6 章 “ 表 格 与 <div> 标 签 ”部 分 。 
重点 练习 内 容 : 


.表格 的 基本 使 用 。 

.表格 中 合并 单元 格 的 使 用 。 

. 表格 标签 中 各 子 标签 及 其 属性 的 含义 。 
. <div> 的 含义 及 其 使 用 。 
.DIV+CSS 的 结合 使 用 。 


@ 


mm mi 一 


应 用 技能 拓展 学 习 


1. 表格 中 的 结构 标签 


使 用 <thead> <tbody> 和 <tfoot> 3 组 标签 ， 可 将 表格 分 为 表 头 、 表 文 内 容 和 页 脚 3 部 分 。 这 3 组 标 
签 需要 结合 使 用 ， 通 过 使 用 这 些 标签 可 以 滚动 表格 的 主题 内 容 。 
例如 ， 在 网 页 中 添加 一 个 大 学 课程 表 ， 关 键 代码 如 下 : 


<table border="1" cellpadding="0" cellspacing="0" width="800" bgcolor="#FFD7FE" height="300"> 
<! 一 表 头 --> 
<thead> 
<tr bgcolor="#FFB039"> 
<th></th> 
<th> 星 期 一 </th> 
<th> 星 期 二 </th> 
<th> 星 期 三 </th> 
<th> 星 期 四 </th> 
<th> 星 期 五 </th> 
</tr> 
</thead> 
<! 一 表格 主题 -> 
<tbody> 


S6 
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<tr> 
<th>08:00-09:30</th> 
<td> 大 学 语文 </td> 
<td> 计 算 机 基础 理论 </td> 
<td> 大 学 英语 </td> 
<td></td> 
<td> 计 算 机 算法 </td> 

</tr> 

<tr> 
<th>09:50-11:20</th> 
<td> 计 算 机 实践 </td> 
<td> 逻 辑 算法 </td> 
<td></td> 
<td>C 语言 基础 </td> 
<td></td> 

</tr> 

<!-- 此 处 省 略 其 余 内 容 --> 

</tbody> 

<! 一 页 脚 --> 

<tfoot> 

<tr bgcolor="#FFB039"> 
<td colspan="6" align="center"> 备 注 : 星期 五 下 午 ， 全 年 级 进行 大 扫除 </td> 

</tr> 

</tfoot> 

</table> 


上 述 代 码 的 实现 效果 如 图 6.1 所 示 。 


09:50-11:20 计算 机 实践 


12:50-14:20 


14:40-16:10 | 多 媒体 技术 


图 6.1 在 网 页 中 添加 课程 表 


2. 伪 元 素 选 择 器 的 巧 用 


伪 元 素 选择 器 可 用 来 改变 文档 中 特定 部 分 的 效果 样式 ， 这 
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CSS 中 常用 的 伪 元 素 选择 器 有 以 下 4 种 。 
回 :first-letter: 指定 对 象 中 第 一 个 字符 的 样式 。 
回 :first-line: 指定 对 象 内 第 一 行文 字 的 样式 。 
回 :before: 在 指定 对 象 的 前 面 添加 内 容 。 
回 :after: 在 指定 对 象 的 后 面 添加 内 容 。 
在 使 用 :after 和 :before 时 ， 需 要 先 通过 content 属性 设置 要 添加 的 内 容 ， 否 则 设置 的 样式 无 效 。 例 
如 训练 9 中 ， 邀 请 函 中 的 凌 形 方块 就 是 通过 :after 实现 的 。 


训练 一 : 基本 功 强化 训练 
1. 表格 实现 键盘 快捷 键 介 绍 页 面 


使 用 电脑 办 公 时 ， 要 想 提高 工作 效率 ， 掌 握 


网 页 ， 显 示 常 见 的 快捷 键 组 合 及 其 功能 ， 如 图 6.2 所 示 。 
(提示 : 设置 表格 隔行 换 色 时 ， 可 通过 :nth-child(2nD) 和 :nth-(2n+l) 分 别 选中 表格 中 的 偶数 行 和 奇 


数 行 ) 


编辑 菜单 
文件 菜单 
视图 菜单 
全 选 
复制 
查找 文本 
新 建文 档 
打开 文件 
能 切 文本 
撤销 文本 
打印 选项 


Alt+E 

Alt+#F 

Alt+V 
CtrltA 
Ctrlt+C 
Ctrl+F 
Ctrl+N 
Ctrl+0 
Ctrl+X 
Ctrl+Z 


Ctrl+P 


图 6.2 表格 实现 键盘 快捷 键 介绍 


是 通过 普通 选择 器 无 法 定义 到 的 部 分 。 


实战 技能 强化 训练 


POOOOO© 


- 些 常 用 的 快捷 键 是 必 不 可 少 的 。 试 着 编程 实现 一 个 


Ctrl+F2+F 

Ctrl+F2+E 

Ctrl+F2HV 
CmdtA 


CmdtZ 


Ctrl+P 
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2. 表格 实现 12306 公告 页 面 POOOOOO 


表格 曾经 是 流行 一 时 的 页 面 布局 方式 , 虽然 现在 人 们 更 多 使 用 DIV+CSS 布局 页 面 , 但 在 布局 一 些 
简单 页 面 时 仍然 可 以 使 用 表格 来 实现 。 使 用 表格 ， 布 局 如 图 6.3 所 示 的 12306 网 站 公告 部 分 。 


a 
候补 的 购 票 操作 说 明 23 公告 候补 的 购 票 操作 说 明 2018-11-03 
关于 调整 互联 网 、 电 话 订 票 起 售 时 间 … 中 国 铁路 广州 局 有 限 公司 关于 2019 年 8 月 … 。 2019-08-29 


修补 的 购 票 操作 说 明 17-23 公告 候补 的 购 票 操作 说 明 

关于 调整 互联 网 、 电 话 订 票 起 售 时 间 … -27 中 国 铁路 广州 局 有 限 公司 关 于 2019 年 8 月 … 2 -29 
候补 的 购 票 操作 说 明 9- 公告 候补 的 购 票 操作 说 明 2018-11-03 
关于 调整 互联 网 、 电 话 订 票 起 售 时 间 … ” 2019-07-27 中 国 铁路 广州 局 有 限 公司 关于 2019 年 8 月 … ” 2019-08-29 


图 6.3 表格 实现 12306 公告 页 面 
3. CSS 实现 唯美 主题 背景 POOOOOO 


每 个 网 站 都 有 自己 的 风格 ， 如 图 6.4 所 示 为 使 用 CSS 实现 的 明日 科技 唯美 风格 页 面 效 果 ， 试 着 编 
程 实现 该 页 面 效 果 。 


6.4 ”明日 科技 唯美 主题 页 面 


4. 表格 实现 KTV 价格 表 POOOOOO 


饭 后 诡 歌 是 年 轻 人 聚会 时 常见 的 娱乐 方式 。 如 图 6.5 所 示 为 印象 KTV 某 分 店 的 价格 表 ， 试 着 编程 
实现 该 页 面 。 
(提示 : 表 头 针线 可 通过 伪 元 素 选择 器 实现 ) 
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本 | 本 


09:00-18:00( 白 场 ) 


22:00-07:00( 午 夜场 ) 


温 区 提示 : 需 一 次 性 消费 对 应 时 间 段 金额 可 诚 免 房 费 


6.5 印象 KTV 价格 表 


5. 实现 电子 版 违章 罚单 


POOOOOO 


有 车 族 可 以 在 网 上 查询 自己 是 否 有 交通 违章 行为 。 如 图 6.6 所 示 为 电子 版 的 违章 罚单 效果 , 试 着 编 


程 实现 该 页 面 。 
6. 实现 ATM 机 银行 凭证 


编写 一 个 程序 ， 实 现 ATM 机 打印 的 银行 凭证 效果 ， 如 图 6.7 所 示 。 


电子 违章 罚单 


4 


处 罚 决定 书 2a0rerprrerpreerpre2073 


处 莘 日 期 


6.6 ”电子 版 违章 罚单 


7. 实现 健身 房 课程 表 


# 半 银行 
客户 通知 书 CUSTOMER ADVICE 
卡号 
ARD 
攻 理 行 号 
ACQUIRER NUNEER 
应 答 三 
RESFONSE NBER 
了 其 他 
TRANSFER JTHER TRANSACTIDN 
舌 卡 请 与 银行 联系 
JACRDRETAINED | PLEASE CONTACT BANK 
ATI 编 号 
ATH ID 


检索 参考 号 
[FETRIEVAL FEFERENCE NUIBER 


6.7 ATM 机 凭证 


健身 馆 每 天 会 安排 不 同 的 课程 ， 人 们 可 根据 课程 表 合理 安排 自己 的 健身 训练 时 间 。 
如 图 6.8 所 示 为 某 健身 馆 的 课程 表 ， 同 一 课程 的 背景 颜色 相同 。 请 尝试 完成 这 个 页 面 。 
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(提示 : 设置 单元 格 背景 颜色 时 ， 可 在 单元 格 中 依次 通过 bg 属性 设置 ， 也 可 以 添加 类 名 ， 然 后 使 
用 CSS 来 设置 ) 


二 Es 周 四 周 五 周 六 周 日 


:en 国 w ww 国 二 = …， 医 辐 
16:30-17:00 哈 拉 瑜伽 时 哈 拉 瑜 伽 


12:50-13:50 肚皮 和 舞 肚皮 舞 哈 拉 瑜伽 
17:30-16:20 有 和 氧 舞 蹈 肚皮 舞 有 氧 短 蹈 肚皮 舞 斑 徊 
16:30-17:20 动感 单车 
17:30-20:15 动感 单车 
图 6.8 ”健身房 课 程 表 
8. 制作 电子 邀请 POOOOOO 


每 着 重大 活动 ， 总 要 邀请 各 类 嘉宾 ， 因 此 总 要 设计 出 各 种 精美 的 邀请 函 。 如 图 6.9 所 示 为 使 用 
DIV+CSS 实现 的 一 封 简易 电子 邀请 函 ， 试 着 实现 该 页 面 。 


j > 
| 邀请 函 人 
I 
4 诚挚 邀 请 活动 流程 
kx 章 获 的 灾 户 用 友 们 。 早上 (AWD 活动 流程 
我 司 将 于 2019 年 8 月 15 日 举行 新 品 发 布 会 ， 届 09:00-09: 30 ”进入 会 场 签到 
时 会 有 舞蹈 走秀 以 及 各 种 互动 环节 。 会 议 当 09:30-10: 00 ”多 ”领导 欢迎 致辞 
天 ， 所 有 参 会 人 员 均 可 享受 最 优惠 的 代理 / 招 10:00-10，30 。” 。” 豪 宾 对 话 论坛 
下 午 《PW) 活动 流程 


商 政策 。 我 们 诚 闭 广 大 顾客 朋友 光临 - 
13:00-13: 30 ”@ 讨论 产品 前 景 


13:30-14: 00 ”Ss 领导 总 结 讲话 
14:00-14: 30 ”8 ”歌舞 表演 活动 河 


| 了 - 


4 
联系 电话 : 0431-S#xekkkk8 
1 
A 


T 活动 地 址 : 吉林 省 长 春 市 南 关 区 


6.9 邀请 函 
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9. DIV 实现 岗位 招聘 页 面 PooQOOOO 


每 着 毕业 季 ， 很 多 毕业 生 就 会 收 到 各 公司 的 招聘 宣传 单 。 试 着 实现 一 个 简易 的 电子 招聘 宣传 单 ， 
其 页 面 效 果 如 图 6.10 所 示 。 


10. 表格 实现 手机 版 天 气 预报 POOQOOOO 
编写 一 个 程序 ， 实 现 手机 端的 天 气 预报 页 面 ， 效 果 如 图 6.11 所 示 。 


明日 学 院 是 吉林 省 明日 科技 有 限 公 司 打造 的 在 线 
实用 技能 学 习 平台 。 该 平台 于 2016 年 正式 上 乒 ， 主 要 
为 学 习 者 提供 海量 优质 的 课 径 ， 课 程 著 均 严 庶 ， 用 户 
可 以 根据 自身 学 习 程度 ， 自 主 安排 学 习 进 度 ， 我 们 的 款 
肯 是 : 为 护 程 学 习 者 提供 一 站 式 服务 ， 培养 用 户 的 摘 


Android 开 发 工程 师 
1、 精 通 Java 语 言 基础 
2、 熟 练 草 提 Android 界 面 开 发 ， 有 项 目 既 验 者 优先 
3、 有 强 列 的 上 进 心 和 商 任 感 ， 勤 奋 好 学 ， 工 作 积 


主动 
4、 具 有 较 好 的 创新 意识 ， 普 于 发 现 身 边 的 新 鲜 事 物 


图 610 岗位 招聘 页 面 图 6.11 手机 版 天 气 预报 
11. 表格 实现 商品 列表 POOOOOO 


布局 商品 列表 页 面 时 通常 使 用 DIV+CSS 实现 , 其实 表格 也 可 以 实现 商品 列表 页 面 。 试 着 编程 实现 
如 图 6.12 所 示 的 水 果 推 荐 购买 列表 页 面 ， 要 求 采 用 表格 来 实现 。 


12. 表格 实现 51 购 商城 首页 商品 信息 
对 于 电 商 网 站 ,相信 大 家 都 不 陌生 。 如 图 6.13 所 示 为 51 购 商城 的 首页 商品 信息 ， 请 使 用 表格 实现 


该 页 面 。 


13. 制作 移动 端 王者 荣耀 官网 页 面 


王者 荣 泡 是 一 款 广 受 年 轻 人 青睐 的 游戏 。 编写 程序 , 实现 移动 端 王者 荣耀 游戏 页 面 ， 效果 如 图 6.14 


所 示 。 
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128 Ya. 了 Y30.o 29.9 


高 山 青草 果 ， 坏 果 包 赔 。 新 鲜 圣 女 果 栅 桃 小 番茄 顺丰 空运 ， 进 口 车 三 子 。 田园 搭档 ， 海 南小 青 村 


v18.9 ya.5 89.00 Y19.90 


图 6.12 水 果 推 荐 购买 列表 


湖 流 前 治 手机 五 玩 吕 质 生活 国际 海 购 个 性 推荐 
换 新 手机 馆 必 抢 识 货 国货 
和 va 网 下 gs 
SS 上 点 肝 多 
全 球 时 沿 栈 寺 和 天 身 生 鲜 海外 直 营 精明 主妇 
3 Sw Ed 
—— 


图 6.13 51 购 商 城 首页 商品 信息 


POOOOO© 


POOOOOO 
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A 


兢 廉 刻 


及 之 猎 妇 


爆料 站 | 故事 站 | 新 人 专区 | 。 体验 服 
新 闻 资 讯 


| [ 验 告 ]1《 王 者 荣 烩 》 禁止 108 香 三 方 代 充 及 封号 处 理 公 (8/10 


可 


[公告 ] |8 月 15 日 体验 服 停机 更 新 公告 08/15 
[公告 ] |8 月 17 日 全 服 不 停机 更 新 公告 8/16 
[公告 ] | 游戏 相册 开局 公告 BiT 
[公告 ] | 关于 后 续 停 机 版 本 更 新 第 略 调整 的 说 明 G8/18 


加 载 更 多 内 容 


图 6.14 王者 荣耀 官网 页 面 


14. 制作 美 团 外 卖 页 面 POOOOO© 


外 卖 是 近 些 年 来 兴起 的 一 个 行业 ， 深 受 广大 上 班 族 的 喜爱 。 如 图 6.15 所 示 为 美 团 订 餐 页 面 ， 试 着 
编程 实现 该 页 面 。 


容 来 香 餐 厅 


-RR; 


Sw 
} RS 12. 90 呈 
9.9 


图 6.15 美 团 外 卖 页 面 
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15. 表格 实现 科学 计算 器 >Ooooooe 
编写 程序 ， 实 现 一 个 简易 的 科学 计算 器 页 面 ， 其 实现 效果 如 图 6.16 所 示 。 


图 6.16 表格 实现 计算 器 页 面 


16. 表格 实现 日 历 页 面 POOOOOO 


编写 程序 ， 实 现 一 则 日 历 页 面 效果 。 如 图 6.17 所 示 。 
(提示 : 设置 单元 格 的 边框 不 重复 显示 ， 可 以 通过 CSS 去 掉 一 部 分 单元 格 边框 ) 


2019JUN 
Su 站 Tu Ww Th 了 Sa 
1 
Ji 
2 3 4 5 6 了 8 
HA EA WwW PE 委 中 日 午 1 
9 10 11 12 13 14 15 
nt By 让 划 十 = t= 4 pp 
-EE 
23 24 25 26 2 28 29 
= Es t tm UF tx tt 
30 
tA 
图 6.17 表格 实现 日 历 页 面 
17. DIV 实现 优惠 券 领取 页 面 POOOOOO 
打开 美 团 或 饿 了 么 App 订餐 时 ， 总 会 弹出 优惠 券 领取 页 面 ， 如 图 6.18 所 示 。 试 着 编写 程序 实现 该 


页 面 效 果 。 
(提示 : 调整 图 片 清晰 度 可 使 用 CSS3 中 的 opacity 属性 实现 ， 其 属性 值 为 0~1 的 小 数 ) 
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18. 微 信 朋 友 圈 动态 效果 >Oooooo@ 
刷 朋 友 圈 几乎 是 当代 人 每 天 做 的 一 件 必 不 可 少 的 事 。 试 着 编写 程序 ， 实 现 仿 微 信 朋 友 圈 的 文章 列 

表 效果 ， 如 图 6.19 所 示 。 


(ay 狂奔 的 蜗牛 
4 即便 总 在 阴 特 后 失望 即便 总 在 对 独 后 疗伤 。 体 然 
器 力 绾 让， 编 不 投降 - 


天 


树 上 的 1 草 
设 人 扶 你 的 时 候 , 自己 也 莫 站 直 ， 路 还 长 ， 背 吕 费 
美 


用 天 


没 主 护 的 舌 多 拉 
(于 了， 2 和 
有 


面 明 大 海 
从 如 生活 辽 骗 了 你 ， 不 要 莫不 要 心 急 ， 请 原 地 用 
一 癌 丙 说 … 


用 天 


6.19 微 信 朋友 圈 页 面 


6.18 ”优惠 券 领 取 页 面 


训练 二 : 实战 能 力 强化 训练 


19. 图 文 显示 课程 列表 页 面 >Ooo@oooe 
如 图 6.20 所 示 为 通过 弹性 布局 实现 的 课程 列表 页 面 ， 试 着 编程 实现 这 个 页 面 。 
>Ooo@oooe 


20. 使 用 表格 布局 女装 页 面 
如 图 6.21 为 使 用 表格 实现 的 精美 女装 页 面 ， 试 着 编程 实现 该 页 面 。 


@ 
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21. 美食 制作 热门 推荐 列表 POOQOQOOO 


如 图 6.22 所 示 为 某 美食 视频 网 站 的 热门 推荐 页 面 。 当 鼠标 指针 悬 停 某 个 视频 教程 上 时 ， 视 频 下 方 
会 向 上 滑 出 一 个 播放 按钮 。 试 着 编程 实现 该 页 面 。 


命令 方式 修改 数据 库 
Dra 


实现 手机 QQ 农场 的 进入 游戏 界面 i , 
x EE - 


看 


奖 计 碟 目 
三 天 打 鱼 两 天 晒 网 统计 学 生成 绩 企业 门户 网 站 -功能 概述 编写 一 个 考试 小 程序 
ct | 实例 ott | 下 全 页 可 ra | 实例 3 js | 交 便 [机 


10 人 Wo 各 80 人 学 习 a 38 人 学习 1 人 318 入 学 3 雪 20 298 人 学 习 


图 6.20 课程 列表 页 面 


女 闫 。 执 栅 索 ; 。 秋生 美神 。 卡 袖 守 衫 。 棒球 外 雪 。 。 毛 太 “高 腰 仔 裤 查看 全 部 》 
查看 更 多 > 
a 卫 可 有 
i ee 知心 百 嵌 雪 统 初秋 外 大 新 品 卫衣 低 价 格子 祖 
起 省 心 搓 配 ， 时 破 不 要 力 人手 必 备 的 牛仔 外 大 hic 苇 扒 起 来 感受 真正 的 物美 价 廉 


潮流 女装 sm 
初春 新 品 抢先 购 最 EE 
pV 柔软 针织 气质 衬衣 显 囊 牛仔 裤 完美 毛 呢 
RN 360 度 元 死角 小 胸 妹子 专 时 舒适 美丽 两 不 误 拥有 它 就 拥有 了 美 
有 
. Vg 了 
们 | 除 区 
| 4 | 必 放 


1 


6.21 使 用 表格 布局 女装 页 面 


热门 推荐 


PR 


家 疙 寺 司 振作 大 合集 , 送 要 心 至 概 逢 作 ， 素 白光 下 要 95 披 环 ? ao, 是 你 
择 竹 到 的 众 号 ;RE 


图 6.22 美食 制作 视频 教程 页 面 


22. 表格 实现 游戏 博客 页 面 POOQOOOO 
编写 一 个 程序 ， 利 用 表格 实现 一 个 游戏 博客 页 面 ， 具 体 效 果 如 图 6.23 所 示 。 


图 6.23 ”游戏 博客 页 面 


第 7 章 列 表 


本 章 训 练 任务 对 应 核心 技术 分 册 第 7 章 “ 列 表 ” 部 分 。 
个 重点 练习 内 容 : 


1. 3 类 常用 列表 的 基本 使 用 。 
2. 使 用 CSS3 对 列表 项 进行 横向 和 纵向 排列 。 
3. 列表 项 样式 的 设置 。 
4. 列表 的 详 套 。 
应 用 技能 拓展 学 习 


1. CSS3 中 的 列表 属性 


使 用 无 序列 表 或 有 序列 表 时， 使 用 type 属性 可 设置 列表 项 的 标志 或 序号 类 型 。CSS3 中 list-style 
属性 可 用 来 定义 列表 项 的 标志 和 位 置 。 其 语法 格式 如 下 : 
list-style:list-style-type list-style-position list-style-image 
list-style-type: 设置 列表 项 标志 的 类 型 ， 其 值 有 circle (空心 圆 )、square( 实 心 方块 ) 等 ， 默 
认 值 为 disc〈 实 心 圆 )。 
list-style-position: 表示 列表 项 标志 的 位 置 ， 其 值 有 inside〈 位 于 文本 内 ， 环 绕 文本 根据 标记 对 
齐 ) 和 outside (位 于 文本 左 侧 ， 放 置 在 文本 外 ) 以 及 inherit (从 父 元 素 继承 list-style-position 
属性 的 值 )。 
加 ”list-style-image: 将 图 像 作 为 列表 项 的 标志 ， 其 值 为 图 像 的 路 径 。 
(提示 : list-style 是 一 个 简写 属性 ， 实 际 使 用 时 既 可 以 直接 使 用 该 属性 ， 也 可 以 单独 使 用 其 他 列表 
属性 。) 


2. 列表 的 嵌 套 


有 序列 表 、 无 序列 表 以 及 定义 列表 之 间 可 以 互相 嵌 套 。 媒 套 的 方式 不 一 样 ， 表 现 结果 也 不 一 样 。 
实际 开发 时 ， 可 根据 需要 选择 适当 的 嵌 套 形式 。 
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例如 ， 通 过 和 嵌 套 有 序列 表 ， 实 现 一 个 刮 刮 乐 介 绍 页 面 ， 代 码 如 下 : 


<style type="text/css"> 
dl{ 让 设置 背景 '/ 
background: url('bg.jpg') no-repeat; 
background-size: 100% 100%; 
width: 600px; 
padding: 180px 0 50px 


} 

dt{ /标题 六 
font-size: 40px; 
width: 250px; 
margin: 0 auto; 
border-radius: 10px; 
color: #af4040; 

} 

olli{ 让 有 序列 表 */ 
margin: 16px Opx; 
font :bold 22px/40px ""; 
color #272220;; 
list-style-position: inside; 
width: 480px; 
background: rgba(255, 194, 142, 0.3); 
border-radius: 10px; 

} 

</style> 

<dl> 


<dt style="text-align: center;"><span style="font-size: 46px"> 刊 刮 乐 </span> 常 识 </dt> 
<dd style="margin:180px 0 0 20px"> 
<ol> 
<li 认 什么 是 刊 刊 乐 </li> 
<li> 刊 刮 乐 生产 过 程 大 揭秘 </i> 
<li> 刊 刮 乐购 票 须知 < 必 > 
<l 认 刊 刊 乐 常见 玩法 汇总 </li> 
<li> 刊 刮 乐 十 大 主题 代表 游戏 </i> 
</ol> 
</dd> 
</dl> 


其 运行 效果 如 图 7.1 所 示 。 
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刊 刊 系 常识 
PdJ3 


图 71 列表 中 愧 套 有 序列 表 
实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 


1. 手机 详情 页 面 信息 >Oooooe 
网 上 购物 时 ， 在 商品 详情 页 面 可 以 查看 商品 的 详细 信息 。 如 图 7.2 所 示 为 手机 商品 的 详情 页 面 ， 请 
完成 该 页 面 。 


(提示 : 颜色 、 套 装 、 数 量 等 整齐 罗列 的 内 容 ， 可 通过 无 序列 表 实 现 ) 


华为 荣 炊 畅 玩 4X 白色 移动 46 手 机 双 卡 双 待 


三 肖 k 二 购物 再 ? 件 打 s 折 ， 调 件 " 白 

nt ¥499. 00 
村 [ 汪 江 首 ”| [天 有 ” [ 卫 去 E ” 快 进 !t 元 
月 铺 量 1015 。 | 累计 稍 重 6015 。。 累计 评价 640 


ET 


手机 详情 页 面 
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2. CSS 制作 精美 书签 POOOOOO 


使 用 CSS 可 以 设计 出 许多 精美 的 书签 样式 ， 试 着 设计 如 图 7.3 所 示 的 书签 效果 。 
(提示 : 书签 上 的 胶 纸 效果 可 通过 :after 或 者 :before 添加 ， 也 可 以 通过 <div> 实 现 ) 


Title #1 


Text 
Content #1 


Tihle #1 Title #1 


Text 


Text 
Content #1 


Content #1 


图 7.3 CSS 制作 精美 书签 


3. 餐厅 菜单 页 面 POOQOOOO 


菜单 是 一 个 饭店 必 不 可 少 的 ， 试 着 设计 一 个 创意 菜单 ， 页 面 效 果 如 图 7.4 所 示 。 
(提示 : 莱 单 左上 角 的 圆圈 可 通过 border-radius 实现 ) 


字 了 有 入 
双人 诗 多 限购 一 惟 ， 以 下 碍 才 任 光 基 一 
单 人 下 餐 限购 一 份 ， 以 下 大 交尾 让 其 一 可 乐 *34 香 辣 汉 旦 *2+ 鸡 米花 ! 份 : 著 条 
#14 逢 捞 忆 
几 购 一 俱 ， 以 下 变 避 信和 共 一 | 可乐 直 村 折 汉 各 他 - 现 米 花 [ 从 :向 T1 | 可 gat 时机 鸡 刀 征 4213 米 花 2 从 1 下 拉 
所 


可 红 们 得 浏阳 保 +14 鸡 米花 1 份 


可 和 ari3R79 直 494 本 守 2 可 有 tat8 二 名 下 x14 生 扫 42 
alas sen 可 生 *24 本 和 9 有色 叶 * 理 兰 鸡 姐 1? 量 。 可 玫 +24 香 六 可 各 +1+ 轩 槐 ?8 服 息 114 驹 
如 从 米花 2 从 
市 T+l 生 名 友 捷 全 11 妆 条 1 份 
eo 
可 乐 414 香 乔 鸡 起 4458 洲 证 1 份 a 
可 乐 ta 各 526d 志 要 匡 | 。 可乐 4 入 站 童子 鸡 人 49 和] 份 


可 乐 *24 香 后 汉 澡 <1+8 十 水 果 下 尊 昔 烤 鸡 姐 +2+ 理 秤 汉 堡 +24 允 米花 2 从 


本 24 鸡 米 
过 好 了 bm 


图 7.4 餐厅 菜单 页 面 
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4. 支付 宝 话费 充值 页 面 POOOOOO 


在 支付 宝 上 缴纳 手机 话费 , 可 省 去 在 营业 厅 排 队 的 等 待 时 间 ， 非常 方便 。 如 图 7.5 所 示 为 仿 支付 宝 
话费 充值 页 面 ， 请 实现 该 页 面 。 


5. 看 图 猜 成 语 页 面 POOQOOOO 


看 图 猜 成 语 是 一 款 老少 皆 宜 的 益 智 游戏 。 编 写 程序 ， 实 现 一 个 看 图 猜 成 语 游戏 页 面 ， 效 果 如 图 7.6 
所 示 。 


图 7.5 支付 宝 充值 页 面 图 7.6 看 图 猜 成 语 页 面 
6. 修改 列表 项 标志 POOOOOO 


可 以 自 定义 列表 标志 ， 使 用 CSS3 中 的 列表 属性 还 可 以 自 定义 列表 项 图 标 。 如 图 7.7 所 示 页 面 中 ， 
左 侧 导航 栏 图 标 为 蓝 色 小 圆圈 ， 当 鼠标 悬 停 时 ， 变 为 绿色 小 圆圈 。 请 实现 该 页 面 。 


图 7.7 修改 列表 项 标志 
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7. QQ 联系 人 列表 POOOOOO 


相信 每 个 人 手机 都 安装 有 QQ。 如 图 7.8 所 示 为 QQ 联系 人 列表 ， 请 尝试 制作 这 个 页 面 。 


4 类 心 


下 A 


上 大 学 局 学 
六 高 由 同学 
有 初中 同学 
上 切 昌 科技 


Pe 


2 


图 7.8 QQ 联系 人 列表 
8. 商品 热 销 排行 榜 POoOOOOO 


电 商 网 站 中 经 常会 有 各 类 热 销 商品 排行 榜 ， 如 图 7.9 所 示 就 是 一 个 简单 的 隐形 眼镜 热 销 排行 榜 页 
面 ， 试 着 实现 该 页 面 。 


.票据 报销 网 络 填 单 POOOOOO 
如 图 7.10 所 示 为 移动 端 票据 报销 填写 页 面 ， 请 实现 该 页 面 。 
10. 仿 手 机 联系 人 页 面 >Ooo@oooe@ 


实现 如 图 7.11 所 示 的 仿 手机 通讯 录 页 面 。 该 页 面 中 ， 当 鼠标 指针 悬 停 在 联系 人 分 类 上 时 ， 其 子 菜 


单 会 自动 展开 。 
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XI 记 - 笔 

京 色 文字 去 示 坦 二 序 分 
排行 榜 ES 消费 类 别 移 
票据 纸 质 发 票 


Se | ase En | Pvise 


ss 潭 和 二 


寺 mono 外 Soo 5 Sto0 日 期 2019-4-16 
从 独 窒 备注 部 门 于 上 
= 总 
Bs eae a PO 
ee te 3 
图 7.9 ” 热 销 排行 榜 图 7.10 ”票据 报销 页 面 图 7.11 手机 联系 人 列表 


训练 二 : 实战 能 力 强化 训练 
11， 分 类 导航 页 面 >Ooooeoee 


随 着 工行 业 的 发 展 ， 一 些 开发 学 习 类 网 站 越 来 越 受 欢迎 。 程 序 员 们 可 以 在 这 些 学 习 网 上 寻找 自己 
需要 的 视频 、 课 程 、 资 源 等 。 制 作 一 个 开发 学 习 网 站 的 分 类 导航 页 面 ， 当 鼠标 指针 悬 停 在 左 侧 菜单 上 
时 ， 右 侧 会 展开 对 应 的 内 容 。 如 图 7.12 所 示 为 鼠标 悬 停 在 “网 络 课程 ”菜单 项 时 ， 右 侧 展开 的 相应 内 
容 页 面 。 


J S 三 天 打 鱼 两 天 晒 网 

二 

ee 。 于 javascript | 视频 旬 费 
oo SC 12 分 1 圳 70 人 学 习 

票 材 收 集 . 


图 7.12 分 类 导航 页 面 
12. 列表 实现 汽车 网 站 导航 菜单 POOQOOOO 


如 图 7.13 所 示 为 列表 实现 的 汽车 网 站 导航 菜单 。 当 鼠标 指针 悬 停 时 ， 导 航 菜单 下 方 会 显示 滑 块 ， 
并 展开 二 级 导航 菜单 ， 请 实现 该 页 面 。 
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图 7.13 列表 实现 汽车 网 站 导航 菜单 


13， 红包 领取 记录 POOOOOO 


相信 大 家 都 在 微 信 中 发 过 红包 ， 也 领 过 红包 。 编写 程序 ， 实 现 一 个 红包 领取 记录 页 面 ， 效 果 如 
图 7.14 所 示 。 


14. 驾 考 宝典 答题 页 面 POOOOOO 


考 驾 照 分 为 两 部 分 ,理论 知识 考试 和 实际 操作 考试 。 理 论 部 分 ， 人 们 可 以 在 “ 驾 考 宝典 ”等 App 
上 快速 做 题 ， 模 拟 考试 场景 。 如 图 7.15 所 示 为 “ 驾 考 宝典 ”上 科目 一 的 答题 页 面 ， 请 完成 该 页 面 。 


红 但 


小 车 私 目 。 > 陋 丽 练习 


小 1.0 元 
rs 本 2、 套 这 县 高 速 公路 上 行驶 的 录 低 流 麻 是 儿 少 ? 
0 公里 /小 对 
bulala 小 魔 仙 1.20 元 公里 /小 
[- 6 手气 最 住 
ep 川 0.90 元 50 公 里 /小 了 
仿 旋转 muma 0.10 元 
入 美 少 女 战士 1.20 元 


二 bulad 覃 人 1.20 元 


图 7.14 红包 领取 记录 页 面 
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15. 教师 节 节 日 贺卡 POOQOOOO 


教师 节 要 到 了 ， 试 着 制作 一 份 网 页 版 贺卡 送 给 老师 ， 页 面 效果 如 图 7.16 所 示 。 
(提示 : 为 图 片 设置 边框 可 通过 CSS 中 的 border-image 实现 ) 


EIRTITET I 


致 那 为 梦想 插 上 翅膀 的 老师 们 


、 、 
、 Se 
ME EEE 何 公 
* \ 
“教师 节 快乐 前 请 
于 更 天 、 
~ 种 下 、 
花 和 

\ 

N 

‘ 


PII NTI NI I I IN SIN NIE SIS SIN NI 


图 7.16 教师 节 贺 卡 
16， 限时 抢购 页 面 POOOOOO 
编写 一 个 程序 ， 实 现 购 物 网 站 的 限时 抢购 页 面 ， 如 图 7.17 所 示 。 


辕 移 用 多 时 多 瑞 洁 


Python 从 入 门 到 项 目 实战 


Ca 已 抢 15227 件 


"a 
玩 转 C 语 言 程序 设计 

Ld 已 抢 1520 件 
”Eo 


图 7.17 限时 抢购 页 面 


17. 手机 商城 “热卖 推荐 ”页 面 POOOOOO 
实现 手机 商城 中 的 “热卖 推荐 ”页 面 。 当 鼠标 指针 悬 停 在 某 个 商品 列表 上 时 ， 商 品 图 片 被 放大 


并 且 显示 出 已 选 参数 等 信息 。 如 图 7.18 所 示 为 选中 第 二 个 商品 后 的 详情 效果 。 
(提示 : 可 以 结合 伪 类 选择 器 与 display 属性 设置 商品 详情 的 显示 与 隐藏 ) 


> 


第 7 章 列表 


二 
可 一 
『 
用 “| 
Rn Ps 
| 
革 果 ipuonca @@ 三 星 calamy Woteg x9s 全 网 通 
双 面 全 坡 坊 设计 | 抗 水 防 尘 已 各: mmauz 全 网 时 主 色 双 视 曲面 屏 ， 双 镜头 防 盾 应 有 分界 双 引 擎 内 充 
和 5888. 00 二 ED ¥sTsL. 00 ¥2498. 00 
@= . = ED 
| 一 
I 7 本 | 
4 上 
二 . 
Jteizw 扣 族 Pro6 全 网 通 360 若 全 网 通 Y67 全 网 通 Y55 全 网 通 
四 钠 防 振 相 由，645 岂 在 多 起 大 运 存 | 葡 龙 55314000nAk 电 好 1600s 东 效 自 拍 正面 指纹 解锁 5. 2 芮 十 的 小 优 焉 
¥1899. 00 ¥1299. 00 ¥1798. 00 ¥1098. 00 


图 7.18 手机 商城 中 热卖 推荐 
18. 开发 类 网 站 的 二 级 导航 菜单 


POOQOOOO 
编写 一 段 程序 ， 制 作 软 件 开发 类 网 站 的 二 级 导航 菜单 ， 具 体 效 果 如 图 7.19 所 示 。 
前 端 开发 人 效 据 库 开 发 Y 后 端 开发 人 移动 端 开发 八 其 他 八 
Oracle 
SQL Server 
MySQL 
图 7.19 自学 网 站 的 二 级 导航 菜单 
19. 轮 播 介绍 手机 的 儿童 模式 >Ooo@oo@oe@ 


部 分 手机 可 以 设置 儿童 模式 。 开 启 儿童 模式 后 ， 可 以 防 沉迷 ， 限 制 游戏 、 应 用 等 开启 的 时 间 ， 保 
护 儿 童 稚嫩 的 视力 。 编 写 程序 ， 通 过 轮 播 图 的 自动 切换 介绍 儿童 模式 ， 页 面 效 果 如 图 7.20 所 示 。 
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图 7.20 手机 儿童 模式 介绍 
20. 时 间 轴 显示 各 月 份 最 适合 的 景点 


POOOOOO 


编写 程序 ， 通 过 一 个 时 间 轴 显示 各 月 份 最 适合 旅游 的 景点 ， 页 面 效 果 如 图 7.21 所 示 。 
(提示 : 时 间 轴 首 、 末 端的 圆 和 箭头 既 可 以 通过 div 实现 ， 也 可 以 通过 :after 和 :before 实现 ) 


哈 泵 演 长 白山 青海 


哈 尔 流 的 冬天 是 彩色 的 ， 长 白山 风光 秀丽, 是 景色 青海 有 太 多 梦 中 的 景象 ， 


万 其 是 殊 上 。 冰 周 展 览 ， 进 人 的 关东 第 一 山 。 登 上 
冰雪 演出 ， 半 不 胜 收 。 群 峰 之 冠 ， 电 有 “一览 众 


呼伦贝尔 大 草原 
呼 伦 风 尔 草原 身 处 大 兴安 
神秘 而 同名 - 自然 景色 养 岭 西 便 ， 因 呼 伦 湖 和 内 尔 
有 汗 泊 、 湿布 . 雪山 . 森 湖 得 名 , 这 也 是 我 国保 存 
林 之 美 … 景 完 好 的 草原。 


上 有 天 堂 , 下 有 苏 杭 , 这 力 赛 ; 奇 绝 天 下 的 原始 、 


7.21 时 间 轴 显示 各 月 份 最 适合 的 景点 
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本 章 训练 任务 对 应 核心 技术 分 册 第 8 章 “ 表 单 ” 部 分 。 
四 ”重点 练习 内 容 ; 
。 表单 标签 的 使 用 。 
. input 标 签 中 type 属 性 各 属性 值 的 应 用 。 
. 合理 布局 表单 页 面 。 
.掌握 input 标 签 的 其 他 常用 属性 。 


上 mm ID 一 


应 用 技能 拓展 学 习 


1. HTML5 新 增 的 input 标签 的 属性 


input 标签 中 ，type 属性 可 以 根据 不 同 的 属性 值 ， 定 义 不 同 的 输入 字段 类 型 。type 属性 值 不 同 ， 其 
功能 也 不 同 ， 如 type="text" 和 type="password" 等 。 除 此 之 外 ，input 标签 还 新 增 了 许多 属性 ， 如 表 8.1 


所 示 。 《由 于 type 属性 大 家 已 熟知 ， 故 表 中 没有 列举 ) 
表 8.1 input 标签 新 增 的 属性 及 其 含义 
属 性 属 性 值 含 义 说 了 明 
accept audio/* video/* image/* 等 ”| 规定 通过 文件 上 传 来 提交 的 文件 类 型 只 针对 type="file" 
alt text 定义 图 像 输入 的 替代 文本 只 针对 type="image" 
autocomplete _ | om/off 规定 是 否 开 启 自动 完成 
autofocus autofocus 页 面 加载 时 ，<input> 标 签 自动 获取 焦点 
checked checked 页 面 加 载 时 ，<input> 标 签 被 预先 选中 。 。 | 只 针对 Dpe"checkbox” 
或 type="radio" 
disabled disabled 禁用 该 <input> 标 签 
form form id 规定 <input> 标 签 所 属 的 一 个 或 多 个 表单 
fomaction | ul 表单 提交 时 处 理 输入 控件 的 文件 URL | 只 针对 Spe"submit" 和 
type="image" 
formenctype Application text/plain 等 表单 提交 到 服务 器 时 如 何 编 码 met Whe "nie 
type="image" 
定义 发 送 表 单数 据 到 actionURL 的 HTTP | 只 针对 type="submit" 和 
formmethod get post 
方法 type="image" 


formnovalidate | formnovalidate 覆盖 <form> 标 签 的 novalidate 属性 
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续 表 
属 性 属性 值 党 义 说 明 
表单 提交 后 ， 显 示 接 收 到 的 相应 名 称 或 关 | 只 针对 type="submit" 和 
formtarget _blank self _ top _parent > 
键 字 type="image" 
height | pixels 规定 <input> 元 素 的 高 度 只 针对 type="image" 
list datalist id 所 用 和 入 和 放 于 史 全 全 
= 预定 义 的 选项 
max number 规定 <input> 标 签 的 最 大 值 
maxlength number 规定 <input> 的 最 大 字符 数 
min number 规定 <input> 标 签 的 最 小 值 
nultiple nultiple 允许 用 户 输入 多 个 值 
name text 定义 <input> 元 素 的 名 称 
_pattem regexp 规定 用 于 验证 <input> 值 的 正则 表达 式 
placeholder text 规定 <input> 标 签 预 期 值 的 提示 信息 
Teadonl readonl 规定 输入 字段 为 只 读 
Tequired required 规定 提交 表单 之 前 必须 输入 字段 
size number 规定 <input> 标 签 的 可 见 宽度 ， 单 位 为 字符 
STC URL 规定 提交 按钮 的 图 像 的 URL 只 针对 type="image" 
step number 规定 <input> 标 签 的 合法 数字 间隔 
Value text 规定 <input> 中 value 的 值 
width pixles 规定 <input> 元 素 的 宽度 只 针对 type="image" 


例如 ， 通 过 <datalist> 标 签 和 list 属性 为 文本 框 添加 快捷 输入 选项 。 代 码 如 下 : 


<form> 


<label> 请 选择 编程 语言 </label><input type="text" list="list1"> 
<datalist id="list1"> 


<option value="HTML"> 
<option value="Java"> 
<option value="PHP"> 
<option value="Android"> 
<option value="python"> 
<option value="C#"> 


</datalist> 


</form> 


其 实现 效果 如 图 8.1 所 示 。 


请 选择 编程 语言 a 


Java 


Android 


图 8.1 list 属性 的 使 用 


(提示 : 表 8.1 所 列举 的 属性 中 ， 有 的 可 以 直接 使 用 ， 有 的 则 需要 结合 其 他 标签 使 用 。 例 如 ，list 
属性 需要 结合 <datalist> 标 签 使 用 ) 


实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 
1，QQ 注册 页 面 >oooooee 


QQ 是 我 们 常用 的 聊天 工具 之 一 ， 甚 至 很 多 人 注册 了 两 个 以 上 QQ 账号 。 如 图 8.2 所 示 为 仿 QQ 注 
册页 面 ， 请 实现 该 页 面 。 


欢迎 注册 


昵称 : 


我 已 阅读 并 同意 服务 提 条 款 和 隐私 政策 


图 8.2 QQ 注册 页 面 
2. 电子 发 票 开具 页 面 >Ooo@oe@oe@ 


开发 票 大 家 都 经 历 过 ， 那 么 大 家 有 没有 开具 过 电子 发 票 呢 ? 如 图 8.3 所 示 为 开具 电子 发 票 的 页 面 
请 实现 该 页 面 。 


3. 中 奖 信息 填写 页 面 POOOOOO 


一 些 网 站 为 了 促销 ， 会 不 定时 地 进行 抽奖 或 派发 优惠 券 。 中 奖 的 小 伙伴 需要 先 绑 定 账号 ， 然 后 才 
能 兑奖 。 编 写 一 个 程序 ， 实 现 中 奖 信息 填写 页 面 。 
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地 址 /电话 


开户 行 信息 


图 8.3 ”电子 发 票 开具 页 面 图 8.4 中 奖 信息 填写 页 面 
.简约 登录 页 面 POOOOOO 
网 站 的 功能 不 同 , 其 页 面 风格 也 不 同 。 如 图 8.5 所 示 就 是 一 个 简约 风格 的 登录 页 面 , 请 实现 该 页 面 。 


登录 页 面 


| 
| 
| 
[oe 


主 骨 前 二 用 户 涪 朵 放 户 恰 议 让 用 广 协 六 最 终 辫 归 我 司 所 有 


图 8.5 简约 登录 页 面 


.“ 爱 家 ”在 线 租房 申请 页 面 POOOOOO 


多 数 人 都 有 过 租房 的 经 历 ， 制 作 如 图 8.6 所 示 的 “ 爱 家 ”在 线 租房 申请 页 面 。 
(提示 : 通过 CSS 中 的 -webkit-linear-gradient 属性 实现 页 面 背景 的 线性 渐变 ) 
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6. 商品 评价 时 限制 输入 的 长 度 POOQOOOO 


很 多 网 站 的 表单 在 用 户 填写 时 都 会 限制 输入 内 容 的 长 度 ， 如 限制 用 户 名 和 密码 的 长 度 等 。 实 现 如 
图 8.7 所 示 网 购 后 的 商品 评价 页 面 ， 限 制 输入 内 容 的 长 度 在 40 个 字 以 内 。 
(提示 : 通过 maxlength 属性 设置 文本 域内 容 的 长 度 ) 


贸 爱 家 
姓 名 冬 机 
让 Er 
二 jp 《 发表 评价 人 


些 业 时 间 203 年 。”， 1n ， 相 元 位 置 | age ，| ipsx ， 


蔽 azaa 妇女 女 太 
快 ; 


@ Nn. 国生 二 an 
@ Hn @ 放 人 mu 


匿名 
IE 
此 | 入 人 商业 全 

与 对 象 ， 仅 限 201? 证 以 上 本 省 本 科 以 上 污 业 生 

se nt 个 月 ,超出 时 物流 服务 
本 次 司 动 | 莫 释 权 归 本 公司 所 有 
服务 态度 
图 8.6 “ 爱 家 ”在 线 租房 申请 页 面 图 8.7 限制 输入 的 长 度 
7. 玩 转 漂 流 瓶 PoOOOOOO 


漂流 瓶 是 QQ 和 微 信 中 早期 的 功能 ， 模 拟 实现 如 图 8.8 所 示 的 漂流 瓶 页 面 效果 。 
8. 在 线 留言 页 面 PoOOOOO 


编写 程序 ， 实 现 移动 端 在 线 留言 页 面 ， 具 体 效果 如 图 8.9 所 示 。 
(提示 : “在 线 留 言 ”两 侧 的 菱形 块 可 通过 :after 和 :before 实现 ， 也 可 通过 添加 DIV+ CSS 实现 ) 
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祝福 瓶 祝福 瓶 ， 准 确 无 误 地 送 去 你 的 机 入 -4 

yy 仿 祝 语 远 在 他 乡 的 从 幸福 安康 … 

我 要 祝福 的 他 在 [了 西 "| [再 支 
6 

na @| 

ek 

竺 发 到 并 博 同时 六 结 很 乡 人 ES es op 

图 8.8 玩 转 漂流 瓶 
9. 包含 第 三 方 登录 接口 的 会 员 登 录 页 面 PooOOOOO 


登录 页 面 很 常见 ， 这 里 设计 一 个 包含 第 三 方 登录 接口 的 登录 页 面 ， 效 果 如 图 8.10 所 示 。 


争 在 线 钾 言 使 
入 蕊 -了 
不 忘 初 心 趁 青春 一 起 拼 会 员 登录 证 没有 账号 


部 门 : | a | 记 往 密码 忘记 窗 码 
留言 : 


图 8.9 在 线 留 言 页 面 图 8.10 包含 第 三 方 信息 的 登录 页 面 
10. 文本 框 不 为 空 验证 POOQOOOO 


注册 或 登录 账号 时 ， 某 些 关键 项 没有 填写 完整 ， 就 无 法 完成 登录 或 注册 ， 并 且 会 弹出 不 能 为 空 的 
提示 。 使 用 HTML 中 的 属性 可 以 完成 表单 的 非 空 验证 。 如 图 8.11 所 示 ， 当 用 户 昵 称 、 密 码 以 及 确认 窗 
码 为 空 时 ， 提 交 该 页 面 ， 就 会 弹出 非 空 警告 ， 请 实现 该 页 面 。 

(提示 : 非 空 验证 可 以 通过 HTML 中 的 required 属性 实现 ) 
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广 册 
用 户 昵称 : 姓名 : 
密码 ; 回 Besit>s. 性 |: 二 男 :二 女 : 
确认 密码 ; 出 B: 年 月 日 
电子 邮箱 : 头像 :| 这 择 文件 未 迁 反 任 河 文件 
本 商城 服务 协议 


提交 有 


图 8.11 文本 框 不 为 空 验证 


训练 二 : 实战 能 力 强化 训练 


11. 手机 端 购 票 页 面 POOOOOO 
编写 程序 ， 实 现 手 机 端 用 户 购 票 时 的 订单 信息 页 面 ， 效 果 如 图 8.12 所 示 。 
12. 个 人 档案 页 面 POOOOOO 


几乎 所 有 网 站 在 用 户 注册 时 ， 都 会 搜集 并 保存 用 户 上 传 的 个 人 信息 。 如 图 8.13 所 示 为 用 户 个 人 档 
案 填 写 页 面 ， 请 实现 该 页 面 。 


二 订单 
个 人 档案 乙 
| 吉林 a 
EE Fo 
乘 车 人 添加 
生肖 已 王座 : | 水 家 应 
林 票 人 血型 ， ^ 职业 4 
手机 号 | 
优 训 券 天 可 月 代 吉 关 | 
服务 费 服务 费 说 明 个 人 说明 
局 论 寺 有 W 册 | 
应 付 全 额 至 0 提交 订单 
图 8.12 手机 端 购 票 页 面 图 8.13 个 人 档案 填写 页 面 
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13. 百货 超市 满意 度 调查 表 
制作 一 个 百货 超市 的 满意 度 调查 表 页 面 ， 其 实现 效果 如 图 8.14 所 示 。 


A 


3、 对 于 我 店 ， 您 最 满意 的 是 ? 

全 商品 质量 售后 服务 店内 环境 
4、 对 于 我 店 ， 您 最 不 满意 的 是 ? 

服务 态度 商品 质量 售后 服务 店内 环境 
5、 您 日 常 消费 在 哪些 方面 ? 

服装 Dy 健身 生活 用 品 
6、 消 费时 ， 你 最 注重 店 里 的 


商品 质量 价格 便宜 交通 便利 服务 态度 
图 8.14 百货 超市 满意 度 调 查 表 


14. QQ 空间 留言 板 


制作 一 个 QQ 空间 留言 板 ， 并 且 美 化 该 页 面 ， 具 体 实现 效果 如 图 8.15 所 示 。 


超市 满意 度 调查 表 
骤 各 


让 名， 性 中 男 女 
1、 是否 经 常 光 归 开店 
是 的 和 去 过 -两 没 去 过 
2、 您 觉得 我 店 的 商人 守重 生 么 样 党 
很 不 好 - 慑 还 不 异 不 了 名 


POOOOOO 


POOOOOO 


| 


| -<ses 


图 8.15 QQ 空间 留言 板 
15. 大 连 一 日 游 预定 报名 页 面 POOOOOO 


以 前 着 年 过 节 ， 家 人 通常 会 团聚 在 一 起 ， 聚 会 娱乐 。 而 现在 ， 许 多 人 们 会 选择 全 家 一 起 外 出 旅游 。 
如 图 8.16 所 示 为 大 连 一 日 游 的 预订 报名 页 面 ， 请 完成 该 页 面 。 


更 
it EE 
et 


定金 0  '- 
图 8.16 旅游 报名 页 面 
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16. bug 意见 反馈 页 面 POOOOOO 


写 程序 出 现 bug 是 常 有 的 事情 。 如 图 8.17 所 示 为 某 进 销 存 管理 系统 的 bug 意见 反馈 页 面 ， 请 实现 
该 页 面 。 


See 


企业 级 进 销 存 管理 系统 


bug 管 理 系统 


bug 标 题 系统 版 本 
模块 优先 级 全 


处 理 人 辣 镍 描述 


上 传 八 图 


交 


图 8.17 bug 意见 反馈 页 面 
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本 章 训练 任务 对 应 核心 技术 分 册 第 9 章 “ 多 媒体 ”部 分 。 
加 重点 练习 内 容 ; 

1. Video 与 audio 的 简单 使 用 。 

2. Video 对 象 与 audio 对 象 中 常用 的 属性 和 方法 。 

3. 自 定义 视频 和 音频 的 工具 栏 。 

4. 获取 和 设置 视频 及 音频 的 状态 、 时 长 等 常用 数据 。 


应 用 技能 拓展 学 习 


1. Audio 标签 与 Video 标签 的 使 用 


Audio 标签 ( 即 <audio> 标 签 ) 和 Video 标签 〈 即 <video> 标 签 ) 是 HIML5 中 新 增 的 标签 。 其 中 ， 
<audio> 标 签 用 于 添加 音频 ，<video> 标 签 用 于 添加 视频 。 有 了 这 两 个 标签 ， 播 放 视频 时 就 不 再 需要 插 
件 了 。 

<audio> 标 签 的 使 用 语法 如 下 : 

<audio src="media/6.mp3" controls autoplay loop></audio> 


回 src: 表示 待 添加 的 音频 的 路 径 。 

回 “controls: 表示 显示 播放 器 的 控制 栏 。 此 为 简写 形式 ， 具 体 写法 是 : controls="controls"。 

回 autoplay: 表示 音乐 加 载 结束 后 自动 播放 。 此 为 简写 形式 ， 具 体 写法 是 : autoplay ="autoplay"。 
回 loop: 表示 音乐 循环 播放 。 此 为 简写 形式 ， 有 具体 写法 是 : loop="loop"。 
<video> 标 签 的 使 用 语法 如 下 : 

<video src="media/2.mp4" poster="media/96.png" autoplay controls loop></video> 


这 里 ，src、controls、autoplay 等 属性 的 含义 与 <audio> 标 签 相同 ，poster 属性 用 于 定义 视频 加 载 时 
(或 播放 前 ) 显示 的 图 像 。 


2. Audio 对 象 和 Video 对 象 的 属性 


自 定义 视频 或 音频 工具 栏 后 ， 要 实现 工具 栏 中 按钮 的 功能 ， 则 需要 通过 Audio 对 象 和 Video 对 象 
的 属性 来 实现 。 


Audio 对 象 和 Video 对 象 的 属性 大 多 类 似 ， 
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表 9.1 Audio 对 象 和 Video 对 象 的 属性 及 含义 


一 些 常用 的 属性 及 其 含义 如 表 9.1 所 示 。 


属 性 说 明 备注 

audioTacks 返回 可 用 于 音频 轨道 的 AudioTrackList 对 象 
autoplay, 设置 或 返回 是 否 在 加 载 完成 后 随机 播放 音频 (视频) 
buffered 返回 表示 音频 (视频 ) 已 缓冲 部 分 的 TimeRanges 对 象 
controller 返回 表示 音频 〈 视 频 ) 当前 媒体 控制 器 MediaController 对 象 
controls 设置 或 返回 音频 视频) 是否 显示 控件 (比如 播放 /暂停 等 ) 
crossOrigin 设置 或 返回 音频 (视频 ) 的 CORS 设置 
currentTime 设置 或 返回 音频 (视频 当前 的 播放 位 置 ( 单 位 s) 
currentSre 返回 当前 音频 (视频 ) 的 URL 
defauleMuted 设置 或 返回 音频 (视频 ) 是 否 默认 为 静音 
defaultPlaybackRate 设置 或 返回 音频 (视频 ) 的 默认 播放 速度 
duration 返回 当前 音频 (视频 ) 的 长 度 (单位 s) 
ended 返回 音频 (视频 ) 播放 是 否 已 结束 
error 返回 音频 (视频) 错误 状态 的 MediaError 对 象 
height 设置 或 返回 height 属性 的 值 仅 针对 video 对 象 
loop 设置 或 返回 音频 〈 视 频 ) 是 否 应 在 结束 时 重新 播放 
mediaGroup 设置 或 返回 音频 (视频 ) 是 否 静 音 《 用 于 连接 多 个 音频 元 素 ) 
muted 设置 或 返回 音频 (视频 ) 是 否 静音 
networkState 返回 音频 (视频 〉 的 当前 网 络 状 态 
paused 设置 或 返回 音频 (视频 ) 是 否 暂停 
playBackRate 设置 或 返回 音频 (视频 ) 播放 的 速度 
played 表示 音频 视频 ) 已 播放 部 分 的 TimeRanges 对 象 

ster 设置 或 返回 poster 属性 的 值 仅 针对 video 对 象 
preload 设置 或 返回 音频 (视频 〉 是 否 在 页 面 加 载 完 后 进行 预 加 载 
readyState 表示 音频 〈 视 频 ) 当前 的 就 绪 状态 
Seekable 返回 音频 (视频 ) 可 寻 址 部 分 的 TimeRanges 对 象 
Seeking 返回 用 户 当 前 是 否 正 在 音频 〈 视 频 ) 中 查找 
sc 设置 或 返回 音频 (视频 ) src 属性 的 值 
startDate 返回 当前 时 间 偏 移 的 Date 对 象 仅 针对 video 对 象 
textTracks 返回 可 用 文本 轨道 的 TextTrackList 对 象 
volume 设置 或 返回 视频 (音频 ) 的 音量 
width 设置 或 返回 视频 width 属性 的 值 仅 针 对 video 对 象 


3. Audio 对 象 和 Video 对 象 方法 


除了 属性 以 外 ， 为 视频 、 音 频 添 加 某 些 功 能 时 还 需要 用 到 一 些 方法 。 表 9.2 列举 了 Audio 和 Video 


对 象 常用 的 方法 ， 综 合 使 用 这 些 方法 和 属性 ， 可 以 实现 一 些 意 想不到 的 功能 。 
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表 9.2 Audio 对 象 和 Video 对 象 方法 


方 ” 法 说 明 
addPlayTrack 向 视频 〈 音 频 ) 添加 新 的 文本 轨道 
canPlayTypeO 检查 浏览 器 是 否 能 够 播放 指定 的 视频 〈 音 频 ) 类 型 
load0 重新 加 载 视频 元 素 
la 开始 播放 视频 
auseO) 暂停 当前 播放 的 视频 


例如 ， 在 网 页 中 添加 视频 ， 定 义 “暂停 ”和 “播放 ”两 个 按钮 ， 且 视频 暂停 时 显示 视频 的 总 时 长 
及 播放 位 置 。 代 码 如 下 : 


<div style="text-align: center"> 
<video src="media/3.mp4" id="video1"></video><br> 
<button type="button" onclick="play1()"> 播 放 </button> 
<button type="button" onclick="pause1()"> 暂 停 </button> 
</div> 
<script type="text/javascript"> 
Var video1 = document.getElementByld("video1"); 
function play1() { 
video1.play(); 


} 
function pause1(){ 
video1.pause(); 
alert(" 已 暂停 ,该 视频 总 时 长 为 " + video1.duration + "s， 已 播放 " + video1.currentTime + "s") 


localhost:63342 显示 : 
已 置 爷 .该 视频 总 对 长 为 23.266395s， 已 揽 放 3.469981s 
休止 此 页 再 显示 对 话 框 . 


9.1 视频 暂停 时 获取 相关 信息 
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实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 
1. 网 页 中 添加 视频 


POOOOOO 
爱 奇 艺 、 优 酷 等 视频 网 站 深 受 人 们 喜爱 ， 因 为 里 面 有 许多 精彩 大 片 。 编 写 程序 ， 使 用 <video> 标 签 
在 网 页 中 添加 一 段 视频 ， 运 行 效果 如 图 9.2 所 示 。 
A 
on/ 一 一 一 一 中 a 洗 
图 9.2 网 页 中 添加 视频 
2. 实现 直播 页 面 POOOOOO 


直播 是 近 几 年 来 兴起 的 一 个 热门 行业 。 编 程 实现 一 个 直播 页 面 ， 运 行 效果 如 图 9.3 所 示 。 


欢迎 担心 的 滑 未 到 直播 间 
掏 心 的 身 关 主 了 你 的 直播 
binbim: 什么 时 候 开始 ? 
as。 666 


图 9.3 直播 页 面 
D2 


3. 设置 视频 控制 栏 的 显示 与 隐藏 >Ooooeooe@ 


在 网 页 中 添加 视频 ,设置 视频 播放 前 的 显示 图 像 ， 并 动态 显示 与 隐藏 视频 控制 栏 ， 具 体 效果 如 
图 9.4 与 图 9.5 所 示 。 
(提示 : 设置 视频 播放 前 显示 的 图 像 可 以 通过 poster 属性 ， 其 属性 值 为 所 设置 图 像 的 路 径 ) 


一 
显示 控制 栏 


9.4 ”隐藏 控制 栏 


隐藏 控制 和 
图 9.5 显示 控制 栏 


4. 添加 背景 音乐 POOOOOO 


编写 程序 ， 在 网 页 中 添加 背景 音乐 ， 设 置 页 面 背景 颜色 随时 间 发 生变 化 ， 并 且 歌 词 内 容 和 歌曲 信 
息 互 相 切 换 显示 ， 其 实现 效果 如 图 9.6 和 图 9.7 所 示 。 
(提示 : 判断 音频 的 播放 状态 可 以 通过 paused 属性 ， 该 属性 用 于 判断 音频 是 否 被 暂停 ) 
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什么 话 都 不 要 说 
你 要 的 快乐 我 全 都 能 全 
一 个 眠 神 就 足够 
你 的 微笑 就 述说 了 所 有 
你 和 我 同时 喜欢 一 本 小 说 
同样 的 爱 上 了 自由 我 们 都 明白 了 
我 的 直觉 告诉 我 直觉 不 会 错 
不 必 说 破 你 心里 想 的 就 是 我 
心事 都 给 我 猜 透 


我 的 直觉 告诉 我 直觉 就 是 我 
小 小 动作 把 秘密 都 告诉 了 我 
点 点 头 就 让 我 守 在 你 左右 不 走 
我 的 直觉 它 告诉 我 
你 心里 想 的 人 是 我 
我 的 直觉 它 对 我 说 
让 我 守候 在 你 左右 


图 9.6 显示 歌词 内 容 图 9.7 切换 歌曲 时 背景 发 生变 化 
5. 动态 设置 视频 大 小 与 播放 状态 Oooooe@ 


我 们 在 观看 视频 时 ， 可 以 通过 控制 栏 设置 视频 的 状态 。 其 实 ， 这 些 控制 栏 并 非 是 固定 不 变 的 ， 用 
户 也 可 以 自 定义 视频 的 控制 栏 。 如 图 9.8 所 示 ， 自 定义 视频 的 播放 与 暂停 按钮 ， 并 且 通 过 按钮 实现 视频 
的 放大 与 缩小 。 

(提示 : 设置 视频 的 大 小 可 以 通过 video 对象 中 的 width 和 height 属性 实现 ) 


6. 自 定 义 视频 工具 栏 PoOOOOOO 


编写 一 个 程序 ， 自 定义 视频 的 工具 栏 ， 其 运行 效果 如 图 9.9 所 示 。 通 过 控制 栏 中 的 4 © "按钮 可 以 
实现 视频 的 播放 与 暂停 ， 同 时 显示 视频 的 播放 进度 以 及 视频 总 时 长 。 
(提示 : 获取 视频 总 时 长 可 以 通过 video 对 象 的 duration 属性 ; 而 获取 视频 的 播放 进度 可 以 通过 
currentTime 属性 ) 


% 
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[所 觅 车 停 | | 放大 | | 第 小 | | 音 通 


VIE 
VICTORIANS 


OW 00:10 
图 9.8 实现 效果 图 9.9 实现 效果 


7. 音乐 循环 播放 >Oooooe 
实现 一 款 音乐 播放 器 ， 音 乐 可 暂停 播放 和 显示 播放 进度 ， 还 可 以 动态 设置 音乐 是 否 循环 播放 以 及 
设置 音乐 播放 动画 。 其 运行 效果 如 图 9.10 所 示 。 
(提示 : 可 以 通过 audio 对 象 的 loop 属性 获取 和 设置 循环 播放 音频 ) 
8. HTML5 手机 视频 播放 器 >Oooooe 


编写 一 个 程序 ， 模 拟 在 手机 中 播放 视频 的 效果 。 设 置 鼠标 悬 停 在 视频 上 时 ， 上 方 滑 出 视频 标题 ， 
右 侧 滑 出 分 享 和 收藏 等 按钮 。 视 频 播放 时 ， 显 示 播 放 进度 ， 并 可 以 设置 视频 暂停 播放 、 继 续 播放 、 放 
大 、 缩 小 等 效果 。 实 现 效果 如 图 9.11 所 示 。 

(提示 : 和 鼠标 悬 停 和 离开 视频 时 调用 函数 可 以 通过 onmouseover 和 onmouseout 实现 ) 


图 9.10 设置 音频 是 否 循环 播放 图 9.11 仿 手 机 播放 器 
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9. 实现 音乐 、 歌 词 同 步 >Oog@oooe@ 


编写 程序 ， 为 音乐 添加 歌词 ， 且 歌词 与 播放 进度 同步 显示 ， 运 行 效果 如 图 9.12 所 示 。 
(提示 : 在 HIML 中 添加 歌词 ， 然 后 通过 JavaScript 将 歌词 中 的 时 间 与 歌词 内 容 分 割 ， 最 后 将 时 
间 与 播放 进度 进行 比较 ， 实 现 歌 词 同 步 ) 


10. 为 视频 添加 弹 幕 POOQOQOOO 


看 视频 或 者 直播 的 时 候 , 经 常会 看 到 许多 弹 幕 文 字 。 编写 程序 ,实现 弹 幕 发 送 功能 , 效果 如 图 9.13 
所 示 。 在 文本 框 中 输入 内 容 ， 然 后 提交 ， 弹 幕 内 容 就 会 在 视频 中 随机 显示 并 向 左 移动 ， 移 除 视频 范围 
后 ， 弹 幕 就 会 被 删除 。 

(提示 : 动态 添加 字幕 ， 需 要 通过 getCreatElementO 方 法 新 建 元 素 ， 然 后 通过 appendChild0 方 法 将 
新 建 元 素 添加 到 父 元 素 中 ) 


直觉 


— 


9.12 播放 音乐 时 同步 显示 歌词 图 9.13 ”为 视频 添加 弹 幕 


训练 二 : 实战 能 力 强化 训练 
11. 为 视频 添加 字幕 >ooooee 


编写 程序 ， 为 视频 添加 字幕 ， 具 体 实现 效果 如 图 9.14 所 示 。 
(提示 : 为 视频 添加 字幕 与 为 音频 添加 歌词 的 原理 类 似 ) 


第 9 章 多 媒体 


2015 年 ， 全 国 计 算 机 等 级 考试 中 心 组 织 召 


N 人 开 了 第 六 届 全 国 计 算 机 等 级 考试 (NCRE) 考 委 
会 议 确定 从 2018 年 3 月 开始 ， 将 实施 2018 版 考 
Examination 试 大 网 ， 考 试 大 纲 中 将 新 增 “Python 语 言 程序 


全 国 计 算 机 等 级 考试 设计 ”科目 ，2018 年 9 月 首次 开 考 。 


首先 看 第 一 条 


图 9.14 为 视频 添加 字幕 


12. 实现 PC 端 音乐 播放 器 POOOOOO 


实现 一 款 PC 端 音乐 播放 器 ， 控 制 栏 效果 如 图 9.15 所 示 。 可 以 实现 前 后 歌曲 切换 以 及 暂停 和 播放 
歌曲 ， 可 以 增 减 歌曲 播放 时 的 音量 。 单 击 控制 栏 中 的 列表 按钮 时 ， 控 制 栏 下 方 会 显示 歌曲 列表 ， 如 


图 9.16 所 示 。 
(提示 : 设置 音量 大 小 可 以 通过 audio 对 象 的 column 属性 实现 ) 


Ha 1 sm OQ+ td- 


图 9.15 音乐 播放 器 控制 栏 
H4 pl 


本 地 歌曲 001- 丰 命名 


本 地 歌曲 002- 未 市 名 


本 地 歌曲 003- 未 命名 


本 地 歌 嵌 004- 示 命名 


Python 程 序 设计 


有 科技 


9.16 显示 歌曲 列表 


13. 模拟 游戏 音效 POOOOOO 
玩 游戏 的 时 候 ， 游 戏 中 精彩 的 音效 可 以 增强 玩家 的 体验 感 和 浸入 感 。 制 作 一 个 小 游戏 ， 当 小 球 碰 


时 
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撞 到 四 周 时 ， 触 发 碰撞 音效 ， 如 图 9.17 所 示 。 


Add Bal FF 


图 9.17 模拟 游戏 音效 


14， 仿 酷 狗 音乐 播放 器 POOOOOO 


酷 狗 是 一 款 广 受 欢迎 的 音乐 APP， 下 面 模仿 酷 狗 音乐 播放 器 ， 实 现 音 乐 播 放 功能 ， 效 果 如 图 9.18 
所 示 。 单 击 歌曲 列表 中 的 播放 /暂停 按钮 ， 可 播放 或 暂停 音乐 ， 单 击 下 方 工具 栏 中 的 左右 切换 按钮 ， 可 
以 切换 音乐 。 


Python 程序 设计 -明日 科技 


明王 科 -python 程序 讼 计 


9.18 仿 酷 狗 音 乐 播放 器 
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本 章 训练 任务 对 应 核心 技术 分 册 第 10 章 “HTMLS5 新 特性 ”部 分 。 
人 @ ”重点 练习 内 容 ; 
.了 和 解 语义 化 元 素 的 含义 。 
.知道 HTML5 中 新 增 的 元 素 及 其 应 用 。 
.掌握 HTML5 中 新 增 的 表单 属性 。 
.了 和 解 HTML5 中 废弃 的 元 素 。 


上 mi 一 


应 用 技能 拓展 学 习 


1. HTML5 中 新 增 的 结构 元 素 与 语义 化 元 素 


每 个 标签 都 有 固定 的 含义 ， 如 标题 标签 <hx>、 段 落 标签 <p> 等 。 开 发 网 站 时 ， 要 实现 不 同 的 功能 ， 
需要 使 用 不 同 的 标签 ， 这 就 叫 作 语义 化 。 
语义 化 的 主要 好 处 是 对 搜索 引擎 友好 。HTML4 网 页 中 ， 较 多 地 使 用 了 <div> 标 签 ， 不 利于 被 搜索 
引擎 抓 取 ， 所 以 HIML5 中 新 增 了 一 些 语义 化 元 素 和 结构 元 素 。 
(1) 新 增 的 结构 元 素 
回 section 元 素 : 定义 文档 或 应 用 程序 的 一 个 区 段 ， 如 章节 、 页 脚 或 文档 其 他 部 分 ， 可 与 hl 、h2 
等 元 素 结合 使 用 。 其 语法 如 下 : 


<section>...</section> 


回 article 元 素 : 定义 文档 中 一 块 独立 的 内 容 ， 如 博客 或 报纸 中 的 一 篇 文章 。 其 语法 如 下 : 
<article>...</article> 

回 ”header 元 素 : 定义 页 面 的 第 一 个 内 容 区 块 或 标题 。 其 语法 如 下 : 

<header>...</header> 

回 nav 元 素 : 定义 页 面 的 导航 部 分 。 其 语法 如 下 : 

<nav>...</nav> 


回 footer 元 素 : 定义 整个 页 面 或 页 面 中 某 个 内 容 区 块 的 脚注 。 一 般 来 说 ， 包 含 创作 者 的 姓名 、 文 
档 的 创作 日 期 以 及 创建 者 联系 信息 。 其 语法 如 下 : 
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<footer>...</footer> 
(2) 新 增 的 语义 元 素 
回 aside 元 素 : 定义 article 元 素 内 容 之 外 但 与 其 内 容 相 关 的 内 容 。 其 语法 如 下 : 


<aside>...</aside> 


回 figure 元 素 : 定义 一 段 独 立 的 流 内 容 ， 一 般 表示 为 文档 主体 流 内 容 中 的 一 个 独立 单元 。 


<figcaption> 元 素 为 figure 元 素 组 添加 标题 。 其 语法 如 下 : 


<figure> 
<figcaption> 标题 </figcaption> 
<p> 文 本 </p> 

</figure> 


回 dialog 元 素 : 定义 对 话 ( 如 交谈 )。 其 代码 示例 如 下 : 


<dialog open> 
<dt> 小 A:</dt> 
<dd> 你 知道 ABCDEFG 的 含义 吗 </dd> 
<dt> 小 B:</dt> 
<dd>A boy can do everything for girl.</dd> 
<dt> 小 B:</dt> 
<dd> 可 你 知道 HIJK 的 含义 吗 </dd> 
<dt> 小 A:</dt> 
<dd> 不 知道 </dd> 
<dt> 小 B:</dt> 
<dd>He is just kidding</dd> 
</dialog> 


上 述 代码 的 运行 结果 如 图 10.1 所 示 。 


小 A: 你 知道 ABCDEFG 的 含义 吗 
小 B:A boy can do everything for 


irl. 
jhB: 可 你 知道 HIJE 的 含义 吗 
小 A: 不 知道 


小 B:He is just kidding 


10.1 dialog 会 话 框 


可 使 用 


回 ”mark 元 素 : 定义 需要 突出 显示 或 高 亮 显示 的 文字 。 最 典型 的 应 用 就 是 在 搜索 结果 中 向 用 户 高 


亮 显示 搜索 关键 词 。 其 语法 如 下 : 
<mark>...</mark> 
回 time 元 素 : 定义 日 期 或 时 间 ， 也 可 以 同时 定义 两 者 。 其 语法 如 下 : 


<time>...</time> 


回 ”progress 元 素 : 定义 运行 中 的 进程 ， 可 用 来 显示 JavaScript 中 耗费 时 间 的 函数 进程 。 其 语法 


如 下 : 
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<progress>...</progress> 


2. HTML5 中 新 增 的 input 元素 类 型 


HIML5 中 ， 新 增 了 很 多 input 元 素 类 型 。 

email: 包含 e-mail 地 址 的 输入 域 。 

url: 包含 URL 地 址 的 输入 域 。 

number: 包含 数值 的 输入 域 。 

range: 包含 一 定 范围 数字 值 的 输入 域 。 

Date Pickers 〈 数 据 检 出 器 )。 

Search: 搜索 域 ( 如 站 点 搜索 或 Google 搜索 等 )， 显 示 为 常规 的 文本 域 。 
HIML5 拥有 多 个 可 供 选取 日 期 和 时 间 的 新 输入 类 型 。 
date: 选取 日 、 月 和 年 。 

month: 选取 月 和 年 。 

week: 选取 周 和 年 。 

time: 选取 时 间 (小 时 和 分 钟 )。 

datetime: 选取 时 间 、 日 、 月 、 年 (UTC 时 间 )。 
datetime-local: 选取 时 间 、 日 、 月 、 年 (本 地 时 间 )。 


办 办 办 多 凶 凶 


交办 办 办 多 


实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 

1. 会 说 话 的 汤姆 猫 POOOOOO 
“会 说 话 的 汤姆 猫 ” 是 一 款 休闲 游戏 ， 深 受 孩子 们 的 喜爱 ， 甚 至 市 场 上 还 有 简易 版 的 汤姆 猎手 机 

玩具 。 模 拟 实现 该 游戏 ， 当 鼠标 单 击 汤姆 猫 身 体 不 同 部 位 时 ， 汤 姆 猫 可 做 出 不 同 反 应 ， 运 行 效果 如 

图 10.2 所 示 。 
(提示 : 通过 <map> 标 签 与 <area> 标 签 定义 图 片 中 的 不 同 部 位 ) 

2. 文字 边缘 链 空 动画 >OoG@e@oe@ 
<svg> 是 HTML5 中 一 个 新 的 标签 , 使 用 它 可 实现 一 些 简 单 的 图 形 和 动画 。 尝试 实现 如 图 10.3 所 示 


的 镁 空 文字 边缘 动画 。 
(提示 : 通过 stroke-dasharray 属性 实现 文字 边缘 动画 ) 
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明 日 汞 了 琢 


图 10.2 会 说 话 的 汤姆 猎 图 10.3 文字 边缘 铂 空 动画 
3， 奴 龙 仆 坡 动画 PooOOOOO 
通过 CSS3 可 以 实现 一 些 简单 路 径 的 动画 , 而 一 些 复杂 的 、 指定 路 径 的 动画 则 需要 通过 <svg> 实 现 。 


如 图 10.4 所 示 为 <svg> 实 现 的 小 恐龙 怜 山坡 动画 。 
(提示 : 要 使 元 素 按 指定 路 径 移 动 ， 可 以 通过 <animate> 或 <animateMotion> 标 签 实现 ) 


EA 


图 10.4 恐龙 假 坡 动画 


4. 悬挂 的 日 历 POOOOOO 


编写 程序 ， 实 现 桌面 日 历 效果 ， 如 图 10.5 所 示 。 
(提示 : HTML5 中 新 增 了 <fieldsef> 标 签 和 <legend> 标 签 ， 其 中 <fieldset> 标 签 用 于 将 相关 元 素 组 合 
在 一 起 ，<legend> 标 签 是 <fieldset> 标 签 的 标题 ， 本 任务 将 用 到 这 两 个 标签 ) 


图 10.5 悬挂 的 日 历 
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5. 气温 变化 图 PoOOOOOO 


实现 如 图 10.6 所 示 的 一 周 气温 变化 及 空气 质量 情况 图 。 
(提示 : <progress> 和 <meter> 标 签 均 可 实现 进度 条 ， 前 者 注重 进程 ， 后 者 注重 度量 ， 本 例 使 用 
<meter> 标 签 实现 ) 


图 10.6 气温 变化 图 
6. 网 购 商 城 商品 跳 转 页 面 >Ooo@oooe@ 


实现 一 个 网 购 商 城 的 商品 列表 页 面 ， 单 击 左 侧 导 航 菜单 ， 右 侧 页 面 可 自动 跳 转 至 对 应 楼 层 的 商品 ， 
如 图 10.7 所 示 。 注 意 使 用 语义 化 标签 (如 <nav> 标 签 、<aside> 标 签 等 ) 蔡 代 部 分 <div> 标 签 。 
(提示 : 通过 超 链接 标签 <a> 可 实现 页 内 跳 转 ) 


时 商 风 胡 毛纺 入 。。¥159. 和 0 针织 毛衣 针织 社 。 +Y180. 9 牛仔 至 各 性 背带 可 拆 。 Y89.40 时 尚 风 衣 毛纺 镇 153. 390 


10.7 商品 列表 中 楼 层 跳 转 页 面 
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训练 二 : 实战 能 力 强 化 训练 
7. 商品 订购 信息 POOOOOO 


使 用 HIML5 中 的 表单 ， 实 现 一 个 商品 信息 订购 页 面 ， 效 果 如 图 10.8 所 示 。 
(提示 : 设置 input range 元 素 样式 时 ， 可 通过 input[type=range]::-webkit-slider-thumb 语句 选中 
滑 块 ) 
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| 商品 订购 


下 有 :pg 


电话 : EE 


图 10.8 商品 订购 信息 
8. 实现 个 人 博客 主页 POOOOOO 


使 用 HTMLS 新 增 的 结构 元 素 及 语义 化 元 素 ， 实 现 一 个 博客 页 面 ， 效 果 如 图 10.9 所 示 。 


pi 


总 、 报 8 
各 守 成 扣 不全 性 老 ， 责 县 各 和 在 殷 里 打转 权谋 各 


10.9 个 人 博客 主页 
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9. 将 图 片 裁 切 为 不 规则 图 形 POOQOOOO 


网 页 上 的 图 形 并 不 都 是 规则 图 形 ， 还 有 很 多 不 规则 图 形 。 这 些 不 规则 图 形 会 使 人 耳目 一 新 ， 记 忆 
深刻 。 将 元 素 裁剪 为 不 规则 图 形 可 通过 CSS3 中 的 clip-path 属性 实现 。 

编写 程序 ， 通 过 选择 页 面 上 方 的 选项 卡 ， 可 将 图 片 裁 切 为 菱形 、 五 边 形 、 五 角 星 、 左 箭头 、 右 箭 
头 、 对 话 框 、 错 号 等 不 规则 形状 ， 其 中 萎 形 效果 如 图 10.10 所 示 。 


[| 


图 10.10 将 图 片 裁 切 为 不 规则 图 形 
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本 章 训练 任务 对 应 核心 技术 分 册 第 11 章 “JavaScript 基础 ”内 容 。 
重点 练习 内 容 ; 


.JavaScript 的 数据 类 型 。 

. 运算 符 的 应 用 。 

.流程 控制 语句 的 使 用 。 
.Window 对 象 的 使 用 。 
.JavaScript 常 用 事件 的 应 用 。 


wm mb 一 


应 用 技能 拓展 学 习 


函数 的 定义 和 调用 


JavaScript 中 可 使 用 fanction 语句 来 定义 一 个 函数 。 语 法 格式 如 下 : 
function 函数 名 ([ 参 数 1, 参数 2…]) 

语句 

[return 返回 值 ] 


加 


函数 名 : 必 选 项 ， 用 于 指定 函数 的 名 称 。 同 一 个 页 面 中 ， 函 数 名 必须 具有 唯一 性 ， 且 
小 写 。 


区 分 大 


回 参数: 可 选项 ， 用 于 指定 参数 列表 。 当 使 用 多 个 参数 时 ， 参 数 间 以 逗号 进行 分 隔 。 一 个 函数 


最 多 可 以 有 255 个 参数 。 
回 ”语句 : 必 选 项 ， 表 示 函 数 体 ， 即 用 于 实现 函数 功能 的 语句 。 
返回 值 ， 可 选项 ， 用 于 返回 函数 值 。 返 回 值 可 以 是 任意 表达 式 、 变 量 或 常量 。 


例如 ， 定 义 一 个 不 带 参数 的 函数 cal0， 在 函数 体 中 输出 两 个 数值 型 变量 的 乘积 ， 代 码 如 下 : 


<script type="textjjavascript"> 


function cal()f /定义 函数 名 称 为 cal 
var a=5; /定义 函数 体 
Var b=6; 
alert(a*b); 


</script> 
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例如 ， 定 义 一 个 用 于 计算 商品 金额 的 函数 account0， 该 函数 有 两 个 参数 ， 用 于 指定 商品 单价 和 数 
量 ， 返 回 值 为 计算 后 的 金额 ， 代 码 如 下 : 


<script type="text/javascript"> 


function account(price,numberj{ /定义 含有 两 个 参数 的 函数 
var sum=price*number; // 计 算 金额 
return sum; // 返 回 计 算 后 的 金额 
} 
</script> 


函数 定义 后 并 不 会 自动 执行 ， 还 需要 在 特定 的 位 置 调用 它 。 函 数 调用 语句 通常 包含 函数 名 称 以 及 
各 个 参数 的 具体 值 。 

(1) 函数 的 简单 调用 

直接 调用 函数 的 语法 如 下 : 

函数 名 (传递 给 函数 的 参数 1, 传 递 给 函数 的 参数 2, .….…); 

例如 ， 定 义 一 个 函数 cal0， 在 函数 体 中 输出 两 个 数值 型 变量 的 乘积 ， 然 后 通过 调用 这 个 函数 输出 
结果 ， 代 码 如 下 : 

<script type="text/javascript"> 


function cal(){ /定义 函数 ， 名 称 为 cal 
var a=5; /定义 函数 体 
var b=6; 
alert(a*b); 
} 
cal(); // 调 用 函数 
</script> 


运行 结果 : 30 

(2) 在 事件 响应 中 调用 函数 

用 户 单 击 某 个 按钮 或 复 选 框 时 将 触发 事件 ， 通 过 编写 程序 对 事件 做 出 反应 的 行为 称 为 响应 事件 。 
在 JavaScript 语言 中 ， 将 函数 与 事件 相关 联 ， 就 完成 了 响应 事件 的 过 程 。 

例如 ， 单 击 “ 提 交 ” 按 钮 时 弹出 对 话 框 ， 代 码 如 下 : 

<script type="text/javascript"> 

function test(){ /定义 函数 
alert(" 我 喜欢 JavaScript "); /定义 函数 体 

<button onClick="test();"> 提 交 </button> 

(3) 通过 链接 调用 函数 

函数 除了 可 在 响应 事件 中 被 调用 之 外 ， 还 可 以 在 链接 中 被 调用 。 在 <a> 标 签 的 href 属性 中 使 用 
“javascript 函 数 名 0” 格 式 来 调用 函数 ， 当 用 户 单 击 这 个 链接 时 ， 相 关 函 数 将 被 执行 。 

例如 ， 单 击 “ 单 击 链接 ”后 弹出 相应 对 话 框 ， 代 码 如 下 : 


<script type="text/javascript"> 
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function test(}{ /定义 函数 
alert(" 我 喜欢 JavaScript"); /定义 函数 体 


</script> 
<a href="javascript:test();"> 单 击 链接 </a> ”<!-- 在 链接 中 调用 自 定义 函数 --> 


2. for 语句 


for 循环 语句 又 被 称 为 计 次 循环 语句 ， 一 般 用 于 循环 次 数 已 知 的 情况 下 ， 在 JavaScript 中 应 用 比较 
广泛 。for 循环 语句 的 语法 格式 如 下 : 
for( 初 始 化 表达 式 ;条 件 表 达 式 ;迭代 表达 式 X 
语句 


时 


回 ”初始 化 表达 式 : 初始 化 语句 ， 用 来 对 循环 变量 进行 初始 化 赋值 。 

回 条件 表达 式 : 循环 条 件 ， 通 常 是 一 个 包含 比较 运算 符 的 表达 式 ， 用 来 限定 循环 变量 的 边 限 。 
如 果 循 环 变量 超过 了 该 边 限 ， 则 停止 该 循环 语句 的 执行 。 

加 ”迭代 表达 式 : 用 来 改变 循环 变量 ， 从 而 控制 循环 次 数 。 通 常 是 对 循环 变量 进行 增 大 或 减 小 
操作 。 

语句 : 用 来 指定 循环 体 ， 在 循环 条 件 的 结果 为 true 时 ， 重 复 执行 。 

例如 ， 应 用 for 语句 输出 1 一 10 这 10 个 数字 ， 代 码 如 下 : 

<script type="text/javascript"> 
for(var i=1;i<=10;i++X{ 

document.write(i+"\n"); 


} 
</script> 


运行 结果 : 12345678910 
3. 数组 简介 


数组 是 JavaScript 中 的 一 种 复合 数据 类 型 。 变量 中 保存 的 是 单个 数据 , 数组 中 保存 的 则 是 多 个 数据 
集合 。 数 组 是 数组 元 素 的 集合 ， 每 个 数组 元 素 都 有 一 个 索引 号 (数组 的 下 标 )， 通 过 索引 号 可 以 方便 
地 引用 数组 元 素 。 数 组 的 下 标 从 0 开始 算 起 ， 第 一 个 元 素 的 下 标 是 0， 第 二 个 元 素 的 下 标 是 1， 以 此 

JavaScript 中 主要 有 以 下 4 种 定义 数组 的 方法 。 

(1) 定义 空 数组 

使 用 不 带 参数 的 构造 函数 可 以 定义 一 个 空 数组 ， 后 期 再 向 数组 中 添加 数组 元 素 。 定 义 空 数组 的 语 
法 如 下 : 

arrayObject = new Array() 

参数 arrayObject 为 必 选 参数 ， 表 示 新 创建 的 数组 对 象 的 名 称 。 
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例如 ， 创 建 一 个 空 数组 ， 然 后 向 该 数组 中 添加 数组 元 素 ， 代 码 如 下 : 


<script type="text/javascript"> 
var arr = new Array(); 
arr[0] = "HTML"; 


arr[1] = "CSS"; 
arr[2] = "JavaScript"; 
</script> 


(2) 指定 数组 长 度 
定义 数组 的 同时 可 以 指定 数组 元 素 的 个 数 。 语 法 如 下 : 


arrayObject = new Array(size) 


回 arrayObject: 必 选 项 ， 表 示 新 创建 的 数组 对 象 的 名 称 。 
回 size: 数组 的 长 度 。 由 于 数组 的 下 标 是 从 零 开始 的 ， 因 此 数组 元 素 的 下 标 范 围 是 0 一 size-1。 
例如 ， 创 建 一 个 元 素 个 数 为 3 的 数组 ， 并 向 该 数组 中 存 入 数据 ， 代 码 如 下 
<script type="text/javascript"> 
var arr = new Array(3); 
arr[0] = 1; 
arr[1] = 2; 
arr[2] = 3; 
</script> 
(3) 指定 数组 元 素 
定义 数组 的 同时 可 以 直接 给 出 数组 元 素 的 值 , 此 时 数组 的 长 度 就 是 括号 中 给 出 的 数组 元 素 的 个 数 。 
语法 如 下 : 
arrayObject = new Array(element1, element2, element3, ...) 


回 arrayObjeet， 必 选项 ， 表 示 新 创建 的 数组 对 象 的 名 称 。 

回 element: 存 入 数组 中 的 元 素 。 使 用 该 定义 方式 时 ， 必 须 指定 一 个 以 上 元 素 。 

例如 ， 创 建 数组 对 象 的 同时 向 该 对 象 中 存 入 数组 元 素 ， 代 码 如 下 : 

<script type="text/javascript"> 

var arr = new Array(123, "JavaScript", true); 

</script> 

(4) 直接 定义 数组 

还 有 一 种 定义 数组 的 方式 ， 这 种 方式 不 需要 使 用 构造 函数 ， 直 接 将 数组 元 素 放 在 一 个 中 括号 中 ， 
元 素 与 元 素 之 间 用 去 号 分 隔 。 语 法 如 下 

arrayObject = [element1, element2, element3, ...] 


回 arrayObject: 必 选 项 ， 表 示 新 创建 的 数组 对 象 名 。 
回 element: 存 入 数组 中 的 元 素 。 使 用 该 定义 方式 时 ， 必 须 指定 一 个 以 上 元 素 。 
例如 ， 直 接 定 义 一 个 含有 3 个 元 素 的 数组 ， 代 码 如 下 : 
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<script type="text/javascript"> 
var arr = [123, "JavaScript", true]; 
</script> 
下 面 介 绍 与 数组 相关 的 一 些 常用 属性 和 方法 。 
(1) 数组 的 length 属性 
length 属性 用 于 返回 数组 的 长 度 。 语 法 如 下 : 
arrayObject.length 
参数 arrayObject 为 定义 的 数组 名 称 。 
例如 ， 输 出 已 创建 的 数组 对 象 的 长 度 。 代 码 如 下 : 
<script type="text/javascript"> 
var arr = ["HTML", "CSS", "JavaScript"]; 


document.write(arr.length); 
</script> 


运行 结果 : 3 

(2) 数组 的 sort0 方 法 
sort0 方 法 用 于 对 数组 中 的 元 素 排序 。 语 法 如 下 : 
arrayObject.sort(sortby) 


arrayObject: 必 选 项 ， 为 定义 的 数组 名 称 。 
sortby: 可 选项 。 规 定 排序 的 顺序 ， 必 须 是 函数 。 
的 说 明 : 如 果 调 用 sort( 方 法 时 没有 使 用 参数 ， 将 按 字母 顺序 对 数组 中 的 元 素 进行 排序 ， 也 就 是 按 
照 字 符 的 编码 顺序 进行 排序 。 如 果 想 按照 其 他 标准 进行 排序 ， 就 需要 提供 比较 函数 。 
例如 ， 将 数组 中 的 元 素 按 字符 编码 顺序 进行 排序 。 代 码 如 下 : 
<script type="text/javascript"> 
Var arr=new Array("JavaScript","HTML","CSS"); 
arr.sort(); 
document.write(arr); 
</script> 
运行 结果 : CSS,HTML,JavaScript 
如 果 想 要 将 数组 元 素 按照 其 他 方法 进行 排序 ， 就 需要 指定 sort0 方 法 的 参数 。 该 参数 通常 是 一 个 比 
较 函 数 ， 该 函数 应 该 有 两 个 参数 〈 假 设 为 a 和 b) 。 在 对 元 素 进行 排序 时 ， 每 次 比较 两 个 元 素 都 会 执行 
比较 函数 ， 并 将 这 两 个 元 素 作为 参数 传递 给 比较 函数 。 其 返回 值 有 以 下 两 种 情况 : 
如 果 返 回 值 大 于 0， 则 交换 两 个 元 素 的 位 置 。 
如 果 返 回 值 小 于 等 于 0， 则 不 进行 任何 操作 。 
例如 ， 定 义 一 个 包含 4 个 元 素 的 数组 ， 将 数组 中 的 元 素 按 从 小 到 大 的 顺序 进行 输出 。 代 码 如 下 : 
<script type="text/javascript"> 


var arr=new Array(9,6,10,5); 
function ascOrder(x,yX{ 
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ifx>y)f 
return 1; 
Jelse{ 


return -1; 

小 
arr.sort(ascOrder); 
document.write(arr); 

</script> 


运行 结果 : 5,6,9,10 
4. toFixed() 方 法 


toFixed() 方 法 是 Number 对 象 的 一 个 方法 , 用 于 将 数值 四 舍 五 入 为 指定 小 数位 数 的 数字 。 语法 如 下 ; 
number.toFixed(x) 


参数 x 为 必 选 参数 。 用 于 规定 小 数 的 位 数 ， 是 0 一 20 的 值 ， 包 括 0 和 20， 有 些 实现 可 以 支持 更 大 
的 数值 范围 。 如 果 省 略 了 该 参数 ， 将 用 0 代 蔡 。 
例如 ， 将 数值 5.623 保留 一 位 小 数 并 四 舍 五 入 。 代 码 如 下 : 
<script type="text/javascript"> 
var num=5.623; 


document.write(num.toFixed(1)); 
</script> 


运行 结果 : 5.6 
5. Math 对 象 简介 


Math 对 象 提供 了 大 量 的 数学 常量 和 数学 函数 。 使 用 Math 对 象 时， 不 能 使 用 new 关键 字 创 建 对 象 
实例 ， 而 应 直接 使 用 “对 象 名 .成 员 ” 的 格式 访问 其 属性 或 方法 。 
(1) floor0 方 法 
floor0 方 法 用 于 返回 小 于 等 于 x 的 最 大 整数 。 如 果 传 递 的 参数 是 一 个 整数 , 则 该 值 不 变 。 语法 如 下 : 
Math.floor(x) 


参数 x 为 必 选 参数 ， 表 示 用 于 操作 的 数字 。 
例如 ， 对 不 同 的 数 应 用 floor0 方 法 。 代 码 如 下 : 


<script type="text/javascript"> 
var a=Math .floor(2.6); 
var b=Math.floor(2.3); 
var c=Math .floor(6); 
var d=Math .floor(6.1); 
var e=Math .floor(-6.1); 
var f=Math .floor(-6.9); 
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document.write(a+"<br>"); 

document.write(b+"<br>"); 

document.write(c+"<br>"); 

document.write(d+"<br>"); 

document.write(e+"<br>"); 

document.write(f); 
</script> 


运行 结果 : 


(2) abs0 方 法 
abs0 方 法 用 于 返回 一 个 数字 的 绝对 值 。 语 法 如 下 : 
Math.abs(x) 
参数 x 为 必 选 参数 ， 表 示 用 于 操作 的 数字 。 
例如 ， 对 不 同 的 数字 应 用 abs0 方 法 。 代 码 如 下 : 
<script type="text/javascript"> 
var a=Math.abs(2.6); 
var b=Math.abs(-3.6); 
document.write(a+"<br>"); 
document.write(b); 
</script> 
运行 结果 : 2.6 
3.6 


Number() 函 数 


Number0 函 数 是 一 个 JavaScript 全 局 函数 ,用 于 将 对 象 的 值 转换 为 数字 。 如 果 对 象 的 值 无 法 转换 为 


数字 ， 那 么 Number0 函 数 将 返回 NaN。 语 法 格式 如 下 : 
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Number(object) 


参数 object 为 可 选 参数 ， 表 示 一 个 JavaScript 对 象 。 如 果 没 有 提供 参数 ， 则 返回 0。 
的 说 明 : 如 果 参 数 是 Date 对 象 ，Number0 防 数 将 返回 从 1970 年 1 月 1 日 至 今 的 毫秒 数 。 
例如 ， 将 不 同 的 对 象 转换 为 数字 。 代 码 如 下 : 
<script type="text/javascript"> 
Var bool = true; 


var date = new Date(); 
var str = "666"; 
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document.write(Number(bool)+"<br>"); 
document.write(Number(date)+"<br>"); 
document.write(Number(str)); 
</script> 
运行 结果 : 1 
1561957737369 
666 


7. eval() 函 数 


eval0 函 数 是 一 个 JavaScript 全 局 函数 ， 用 于 计算 JavaScript 字符 串 ， 并 把 它 作为 脚本 代码 来 执行 。 
语法 格式 如 下 : 


eval(string) 


参数 string 为 必 选 参数 ， 表 示 要 计算 的 字符 串 ， 其 中 含有 要 计算 的 JavaScript 表达 式 或 要 执行 的 
语句 。 
例如 ， 应 用 eval0 方 法 执行 JavaScript 语句 或 表达 式 。 代 码 如 下 : 
<script type="text/javascript"> 

eval("x=10;y=20;document.write(x+y)"); 
document.write("<br>" + eval("2*3")); 
document.write("<br>" + eval(x+26)); 
</script> 
运行 结果 : 30 
6 
36 


8. parselnt() 函 数 


parseInt0 函 数 可 解析 一 个 字符 串 ， 并 返回 一 个 整数 。 语 法 如 下 : 
parselnt(string, radix) 


回 string: 要 被 解析 的 字符 串 。 
回 radix: 可 选 参数 ， 表 示 要 解析 的 数字 的 基数 ， 该 值 范围 是 2 一 36。 
印 注意 : 如 果 字 符 串 的 第 一 个 字符 不 能 被 转换 为 数字 ， 那 么 parseInt0 函 数 将 返回 NaN。 
例如 ， 将 字符 串 “123abc” 转 换 为 整数 。 代 码 如 下 : 
<script type="text/javascript"> 
var str="123abe"; // 定 义 字符 串 


document.write(parselnt(str)); 
</script> 


运行 结果 : 123 
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Date 对 象 


在 JavaScript 中 ， 使 用 Date 对 象 可 以 操作 日 期 和 时 间 。 


(1) 创建 Date 对 象 


要 使 用 Date 对 象 操作 日 期 和 时 间 ， 首 先 要 使 用 new 运算 符 创建 Date 对 象 。 创 建 一 个 不 带 参数 的 
Date 对 象 的 语法 格式 如 下 : 


dateObj = new Date() 


参数 dateObj 表示 要 赋值 为 Date 对 象 的 变量 名 。 
创建 一 个 指定 日 期 Date 对 象 的 语法 格式 如 下 : 


dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]]) 
各 参数 的 说 明 如 表 11.1 所 示 。 


表 11.1 Date 对 象 的 参数 说 明 
说 了 明 


dateObj 必 选 项 ， 表 示 要 赋值 为 Date 对 象 的 变量 名 


year 必 选 项 ， 表 示 完 整 的 年 份 ， 比 如 1976〈 而 不 是 76) 
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参数 

month 必 选 项 ， 
date 必 选 项 ， 
hours 可 选项 ， 
minutes 可 选项 ， 
seconds 可 选项 ， 
ms 可 选项 ， 


表示 月 份 ， 
表示 日 期， 
表示 小 时 ， 
表示 分 钟 ， 
表示 秒 钟 ， 
表示 毫秒 ， 


是 0~11 的 整数 (1 月 至 12 月 ) 

是 1 一 31 的 整数 

是 0 一 23 的 整数 。 如 果 提 供 了 minutes 则 必须 给 出 
是 0 一 59 的 整数 。 如 果 提 供 了 seconds 则 必须 给 出 
是 0 一 59 的 整数 。 如 果 提 供 了 ms 则 必须 给 出 

是 0 一 999 的 整数 


例如 ， 在 页 面 中 输出 当前 的 日 期 和 时 间 ， 代 码 如 下 : 


<script type="text/javascript"> 
var newDate=new Date(); 
document.write(newDate); 


</script> 


运行 结果 : Thu Sep 12 2019 09:43:07 GMT+0800 (中 国标 准时 间 ) 


(2) getTime() 方 法 


Date 对 象 提供 的 getTime( 方 法 可 以 返回 指定 日 期 和 时 间距 1970 年 1 月 1 日 之 间 的 毫秒 数 。 语 法 
格式 如 下 : 


dateObj.getTime() 


参数 dateObj 为 创建 的 Date 对 象 名 。 
例如 ， 输 出 指定 日 期 和 时 间距 1970 年 1 月 1 日 之 间 的 毫秒 数 ， 代 码 如 下 : 


<script type="text/javascript"> 
var now = new Date(2019,6,19,10,26,36); 
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document.write(now.getTime()); 
</script> 


运行 结果 : 1563503196000 
10. setTimeout() 方 法 


setTimeout0 方 法 是 Window 对 象 中 的 方法 ， 用 于 在 指定 毫秒 数 后 调用 函数 或 计算 表达 式 。 语 法 格 
式 如 下 : 

setTimeout( 要 执行 的 代码 或 函数 ， 等 待 的 毫秒 数 ) 

例如 ， 经 过 3 秒 钟 执行 JavaScript 代码 ， 在 页 面 中 弹出 一 个 对 话 框 。 代 码 如 下 : 


<script type="text/javascript"> 
setTimeout("alert(' 对 不 起 , 让 您 久 等 了 ! ')", 3000 ) 
</script> 
例如 ， 经 过 3 秒 钟 执行 JavaScript 函数 ， 使 页 面 中 指定 的 文本 消失 。 代 码 如 下 : 
<p id="content"> 三 秒 钟 后 消失 !</p> 
<script type="text/javascript"> 
setTimeout("changeState()",3000 ); 
function changeState(}{ 
var content=document.getElementByld('content’); 
content.innerHTML=""; 


</script> 


11. 事件 对 象 简介 


正 浏览 器 中 ， 事 件 对 象 指 的 是 window 对 象 的 属性 event， 只 在 事件 发 生 的 时 候 被 访问 ， 事 件 处 理 
完 之 后 就 消失 。 在 标准 的 DOM 浏览 器 中 ，event 必须 作为 唯一 的 参数 传 给 事件 处 理 函 数 。 为 了 实现 兼 
容 性 ， 通 常 采 用 下 面 的 方法 : 
<script type="text/javascript"> 
function someHandle(e) { 
/处 理 兼容 性 ， 获 得 事件 对 象 


var e =e || window.event; 
} 


</script> 
在 标准 DOM 浏览 器 中 ， 发 生 事件 的 元 素 通过 event 对 象 的 target 属性 获取 。 例 如 ， 单 击 “ 测 试 ” 
按钮 时 获取 触发 事件 元 素 的 节点 名 称 ， 代 码 如 下 : 
<script type="text/javascript"> 
function test(e) { 


var e =e || window.event; 
alert(e.target.nodeName); 
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} 
</script> 
<button onclick="test()"> 测 试 </button> 
运行 结果 : BUTTON 
(1) clientX 和 clientY 事件 属性 
clientX 事件 属性 用 于 返回 事件 被 触发 时 鼠标 指针 相对 于 浏览 器 页 面 或 客户 区 ) 的 水 平 坐标 ， 


clientY 事件 属性 用 于 返回 事件 被 触发 时 鼠标 指针 相对 于 浏览 器 页 面 〈 或 客户 区 ) 的 垂直 坐标 。 这 里 ， 


客户 
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区 表示 当前 窗口 。 

clientX 属性 的 语法 格式 如 下 : 

event.clientX 

clientY 属性 的 语法 格式 如 下 : 

event.clientY 

例如 ， 单 击 页 面 时 获取 鼠标 指针 的 坐标 ， 代 码 如 下 : 


<script type="text/javascript"> 
document.onmousedown=function (e) { 
Var x=e.clientX; 
var y=e.clientY; 
alert("X 坐标 : "+x+"，Y 坐标 : "+y); 
》 
</script> 


运行 结果 如 图 11.1 所 示 。 


此 网 页 显示 : 
X 坐 标 : 530 ,Y 坐 标 : 156 
华 止 此 页 再 显示 对 话 框 . 


确定 


图 11.1 获取 鼠标 指针 的 坐标 
(2) dispatchEvent0 方 法 
dispatchEvent0 方 法 是 事件 对 象 的 一 个 方法 ， 用 于 向 指定 事件 目标 派发 一 个 事件 。 
例如 ， 向 id 为 show 的 按钮 派发 一 个 单 击 事件 。 代 码 如 下 : 
<button id="show" onclick="alert(' 先 完成 一 个 小 目标 "> 提示 </button> 
<script type="text/javascript"> 
var myEvent = new Event('click"); 


document.getElementByld("show").dispatchEvent(myEvent); 
</script> 


运行 结果 : 先 完成 一 个 小 目标 
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12. 为 元 素 绑 定 事件 


以 绑 定 onclick 事件 为 例 ，JavaScript 中 为 元 素 绑 定 onclick 事件 的 语法 如 下 : 


object.onclick=function(){ 
SomeJavaScriptCode 
上 
参数 SomeJavaScriptCode 为 必 选 参数 。 用 于 规定 该 事件 发 生 时 执行 的 JavaScript 代码 。 
例如 ， 为 “测试 ”按钮 绑 定 onclick 事件 ， 单 击 按钮 时 弹出 相应 的 对 话 框 。 代 码 如 下 : 
<button id="test"> 测 试 </button> 
<script type="text/javascript"> 

document.getElementByld("test").onclick = function () { 


alert(" 您 单 击 了 测试 按钮 "); 


} 
</script> 


13. DOM 简介 


DOM 是 Document Object Model (文档 对 象 模 型 ) 的 缩写 。 网 页 被 加 载 时 ， 浏 览 器 会 创建 页 面 的 文 
档 对 象 模型 。 文 档 对 象 模型 采用 的 分 层 结构 为 树 形 结构 ， 以 树 节点 方式 表示 文档 中 的 各 项 内 容 。 在 文 
档 对 象 模型 中 ， 每 个 对 象 都 被 称 为 一 个 节点 〈Node) 。 下 面 介绍 一 下 几 种 节点 的 概念 。 
回 ” 根 节点 : 最 顶层 的 <html> 节 点 。 
回 父 节 点 : 某 节点 之 上 的 节点 称 为 该 节点 的 父 节点 (parent)。 例 如 ，<html> 是 <head> 和 <body> 
的 父 节 点 ，<head> 是 <title> 的 父 节点 。 
回 子 节点 : 某 节点 之 下 的 节点 称 为 该 节点 的 子 节点 (child)。 例 如 ，<head> 和 <body> 是 <html> 
的 子 节 点 ，<title> 是 <head> 的 子 节点 。 
兄弟 节点 : 位 于 同一 层次 且 拥 有 相同 父 节点 的 节点 就 是 兄弟 节点 (sibling)。 例 如 ，<head> 和 
<body> 就 是 兄弟 节点 。 
下 面 来 看 一 下 与 文档 对 象 相关 的 属性 和 方法 。 
(1) nodeName 属性 
nodeName 属性 可 以 根据 节点 类 型 返回 其 名 称 。 语 法 格式 如 下 : 


node.nodeName 
例如 ， 获 取 id 属性 值 为 js 的 元 素 的 节点 名 称 ， 代 码 如 下 : 


<div id="js">JavaScript</div> 

<script type="text/javascript"> 
alert(document.getElementByld("js").nodeName); 

</script> 


运行 结果 : DIV 
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(2) value 属性 
value 属性 用 于 设置 或 者 返回 属性 的 值 。 
设置 属性 值 的 语法 格式 如 下 : 
attribute.value=value 
返回 属性 值 的 语法 格式 如 下 : 
attribute.value 
例如 ， 单 击 “ 提 交 ” 按 钮 时 输出 文本 框 的 值 ， 代 码 如 下 : 


<input type="text" id="demo" size="15"> 
<input type="button" value=" 提 交 " onclick="show()"> 
<script type="text/javascript"> 
function show(){ 
alert(document.getElementByld("demo").value); 


El 


} 
</script> 
运行 结果 如 图 11.2 所 示 。 


JavaScript 网 页 特效 提交 


此 网 页 显示 : 
JavaScript 网 页 特效 
人 禁止 此 页 再 显示 对 话 框 。 


11.2 ”实现 效果 
(3) checked 属性 
checked 属性 用 于 设置 或 返回 复 选 框 是 否 应 被 选中 。 
设置 checked 属性 的 语法 格式 如 下 : 
checkboxObject.checked=truelfalse 


返回 checked 属性 的 语法 格式 如 下 : 
checkboxObject.checked 


例如 ， 单 击 “ 选 中 ”按钮 时 ， 设 置 复 选 框 为 选中 状态 ， 代 码 如 下 : 


<input type="checkbox" id="agree"> 同 意 协议 
<input type="button" value=" 选 中 " onclick="check()"> 
<script type="textjjavascript"> 
function check(){ 
document.getElementByld("agree").checked=true; 


有 
</script> 
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运行 结果 如 图 11.3 和 图 11.4 所 示 。 


同意 协议 选中 可 同意 协议 [天 


图 11.3 原始 效果 图 11.4 选中 复 选 框 
(4) innerHTML 属性 
innerHTML 属性 用 于 设置 或 返回 元 素 含有 的 HTML 文本 ,不 包括 元 素 本 身 的 开始 标记 和 结束 标记 。 
例如 ， 通 过 innerHTML 属性 设置 <div> 标 记 的 内 容 ， 代 码 如 下 : 
<div id="demo"></div> 
<script type="text/javascript"> 
document.getElementByld("demo").innerHTML=" 功 夫 不 负 有 心 人 "; 
</script> 
运行 结果 : 功夫 不 负 有 心 人 
(5) className 属性 
className 属性 用 于 设置 或 返回 元 素 的 class 属性 值 。 
获取 class 属性 值 的 语法 格式 如 下 : 
HTMLEIementObject.className 
设置 class 属性 值 的 语法 格式 如 下 : 
HTMLEIementObject.className=classname 
例如 ， 获 取 指 定 div 元 素 的 class 属性 值 ， 代 码 如 下 : 


<div id="myid" class="mystyle"></div> 

<script type="text/javascript"> 
document.write(document.getElementByld('myid').className); 

</script> 


运行 结果 : mystyle 

(6) getElementById0 方 法 

getElementById0 方 法 是 DOM 中 定义 的 查找 元 素 方法 ， 用 于 返回 对 拥有 指定 id 的 第 一 个 对 象 的 
引用 。 语 法 如 下 : 


document.getElementByld(elementID) 


参数 elementID 为 必 选 参数 ， 表 示 元 素 的 id 属性 值 。 

例如 ， 输 出 id 属性 值 为 demo 的 元 素 的 HTML 内 容 ， 代 码 如 下 : 

<div id="demo"> 明 日 科技 </div> 

<script type="text/javascript"> 
alert(document.getElementByld("demo").innerHTML); 

</script> 


运行 结果 : 明日 科技 
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(7) getElementsByTagName( 方 法 
getElementsByTagName0 方 法 是 DOM 中 定义 的 查找 元 素 的 方法 , 用 于 返回 带 有 指定 标签 名 的 对 象 


的 集合 。 语 法 如 下 : 


document.getElementsByTagName(tagname) 


参数 tagname 为 必 选 参数 ， 表 示 需 要 获取 元 素 的 标签 名 。 

例如 ， 设 置 第 一 个 div 元 素 的 HIML 内 容 ， 代 码 如 下 : 

<div></div> 

<script type="text/javascript"> 
document.getElementsByTagName("div")[0].innerHTML=" 笑 书 神 侠 倚 姑 锣 "; 

</script> 


运行 结果 : 笑 书 神 侠 倚 正和 怨 
(8) querySelector0 方 法 
querySelector0 方 法 用 于 返回 文档 中 匹配 指定 CSS 选择 器 的 一 个 元 素 ， 且 仅 返 回 匹配 指定 选择 器 


的 第 一 个 元 素 。 语 法 如 下 : 


型 、 


型 、 
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document.querySelector(selectors) 


参数 selectors 为 必 选 参数 ， 用 于 指定 一 个 或 多 个 匹配 元 素 的 CSS 选择 器 。 可 以 使 用 其 id、 类 、 类 
属性 、 属 性 值 等 来 选取 元 素 。 多 个 选择 器 之 间 使 用 逗号 隔 开 。 
例如 ， 将 页 面 中 第 一 个 div 元 素 的 内 容 修改 为 “JavaScript”， 代 码 如 下 : 
<div>HTML</div> 
<div>CSS</div> 
<script type="text/javascript"> 
document.querySelector("div").innerHTML = "JavaScript"; 
</script> 
运行 结果 : JavaScript 
Css 
(9) querySelectorAll0 方 法 
querySelectorAll0 方 法 用 于 返回 文档 中 匹配 指定 CSS 选择 器 的 所 有 元 素 。 语 法 如 下 : 
document.querySelectorAll(selectors) 


参数 selectors 为 必 选 参数 ， 用 于 指定 一 个 或 多 个 匹配 元 素 的 CSS 选择 器 。 可 以 使 用 其 id、 类 、 类 
属性 、 属 性 值 等 来 选取 元 素 。 多 个 选择 器 之 间 使 用 逗号 隔 开 。 
例如 ， 将 页 面 中 第 二 个 div 元 素 的 内 容 修 改 为 “JavaScript”， 代 码 如 下 : 


<div>HTML</div> 

<div>CSS</div> 

<script type="text/javascript"> 
var div = document.querySelectorAll("div"); 
div[1].innerHTML = "JavaScript"; 

</script> 
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(10) getElementsByClassName() 方 法 
getElementsByClassName() 方 法 是 DOM 中 定义 的 用 于 查找 元 素 的 方法 ， 可 返回 文档 中 所 有 指定 类 
名 的 元 素 集合 。 语 法 如 下 : 


document.getElementsByClassName(classname) 


参数 classname 为 必 选 参数 ， 表 示 需 要 获取 的 元 素 类 名 ， 多 个 类 名 之 间 使 用 空格 分 隔 。 

例如 ， 设 置 类 名 为 wuxia 的 第 一 个 元 素 的 HTML 内 容 ， 代 码 如 下 : 

<div class="wuxia"></div> 

<script type="text/javascript"> 
document.getElementsByClassName("wuxia")[0].innerHTML=" 飞 雪 连 天 射 白 鹿 "; 

</script> 


运行 结果 : 飞 雪 连 天 射 白 鹿 
14. style 对 象 简介 


style 对 象 是 HTML 对 象 的 一 个 属性 。style 对 象 提供 了 一 组 对 应 于 浏览 器 所 支持 的 CSS 样式 的 属 
性 (如 background、fontSize、borderColor 等 ) 。 每 一 个 HTML 对 象 都 有 一 个 style 属性 ， 可 以 使 用 这 
个 属性 访问 CSS 样式 属性 。 

在 style 对 象 中 ， 样 式 标签 属性 和 样式 属性 基本 上 是 相互 对 应 的 ， 两 种 属性 的 用 法 也 基本 相同 。 唯 
一 的 区 别 是 样式 标签 属性 用 于 设置 对 象 的 属性 ， 而 样式 属性 用 于 检索 或 更 改 对 象 的 属性 。 也 可 以 说 ， 
样式 标签 属性 是 静态 属性 ， 样 式 属性 是 动态 属性 。 

例如 ， 利 用 style 对 象 改变 字体 的 大 小 ， 代 码 如 下 : 

<style type="text/css"> 


body{ 
color: green; 


} 
p{ 
font-size: 12px; 
</style> 
<body> 
<p id="pid"> 改 变 字体 大 小 </p> 
<script type="text/javascript"> 
document.getElementByld("pid").style.fontSize = '36px'; 


</script> 
</body> 
(1) width 属性 
width 属性 可 以 设置 或 返回 元 素 的 宽度 。 
设置 width 属性 的 语法 格式 如 下 : 


Object.style.width="autollength|%linherit" 
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auto: 默认 值 ， 表 示 浏 览 器 设置 的 宽度 。 

length: 使 用 px、cm 等 单位 定义 的 宽度 。 

%: 定义 宽度 为 父 元 素 的 百分比 。 

inherit: width 属性 的 值 从 父 元 素 继承 。 

可 width 属性 的 语法 格式 如 下 : 

Object.style.width 

例如 ， 单 击 “ 改 变 宽度 ”按钮 时 ， 设 置 按钮 的 宽度 为 100 像素 ， 代 码 如 下 : 


<script type="text/javascript"> 
function changeWidth(){ 
document.getElementByld("but").style.width="100px"; 


| 


} 
</script> 
<input type="button" id="but" onclick="changeWidth()" value=" 改 变 宽 度 "> 


运行 结果 如 图 11.5 和 图 11.6 所 示 。 


改变 宽度 


图 11.5 单 击 前 图 11.6 单 击 后 
(2) opacity 属性 


opacity 属性 可 以 设置 或 返回 元 素 的 不 透明 度 。 当 元 素 的 不 透明 度 为 1 时 ， 表 示 完 全 不 透明 ; 


素 的 不 透明 度 为 0.5 时 ， 表 示 半 透明 ; 当 元 素 的 不 透明 度 为 0 时， 表示 完全 透明 。 
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设置 opacity 属性 的 语法 格式 如 下 : 
object.style.opacity="numberlinitiallinherit" 

number: 指定 的 不 透明 度 。 

回 initial:， 设置 不 透明 度 为 其 默认 值 。 

回 inherit， 从 父 元 素 继承 不 透明 度 值 。 

返回 opacity 属性 的 语法 格式 如 下 : 

object.style.opacity 

例如 ， 设 置 id 属性 值 为 js 的 div 元 素 的 不 透明 度 为 0.5， 代 码 如 下 : 


<style type="text/css"> 
div{ 
width: 100px; 
height: 50px; 
line-height: 50px; 
background: green; 


0 
</style> 
<div id="js">JavaScript</div> 
<script type="text/javascript"> 
document.getElementByld("js").style.opacity=0.5; 
</script> 
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运行 结果 如 图 11.7 所 示 。 
(3) left 属性 

left 属性 用 于 设置 或 返回 定位 元 素 的 左 部 位 置 。 

设置 left 属性 的 语法 格式 如 下 : 

Object.style.left="autollength|%linherit” 

回 auto: 默认 值 ， 表 示 通 过 浏览 器 计算 左 部 的 位 置 。 

回 length: 使 用 px、cm 等 单位 定义 元 素 左边 距离 最 近 一 个 具有 定位 设置 父 元 素 的 左 部 边缘 的 位 
置 。 可 使 用 负 值 。 

回 ”%: 定义 元 素 左边 距离 最 近 一 个 具有 定位 设置 父 元 素 的 左 部 边缘 的 百分比 位 置 。 

回 inherit: left 属性 的 值 从 父 元 素 继承 。 

返回 left 属性 的 语法 格式 如 下 : 

Object.style.left 

例如 ， 设 置 id 属性 值 为 demo 的 元 素 到 页 面 左 端的 距离 为 50 像素 ， 代 码 如 下 : 

<div id="demo" style="position: absolute;"> 阴 天 会 更 好 </div> 

<script type="text/javascript"> 
document.getElementByld("demo").style.left="50px"; 

</script> 

运行 结果 如 图 11.8 所 示 。 

(4) top 属性 

top 属性 用 于 设置 或 返回 定位 元 素 的 顶部 位 置 。 

设置 top 属性 的 语法 格式 如 下 : 

Object.style.top="autollength|%linherit" 

auto: 默认 值 ， 表 示 通 过 浏览 器 计算 项 部 的 位 置 。 

length: 使 用 px、cm 等 单位 定义 元 素 顶 边 距离 最 近 一 个 具有 定位 设置 父 元 素 的 顶部 边缘 的 位 
置 。 可 使 用 负 值 。 

回 ”%: 定义 元 素 顶 边 距离 最 近 一 个 具有 定位 设置 父 元 素 的 项 部 边缘 的 百分比 位 置 。 

回 inherit: top 属性 的 值 从 父 元 素 继承 。 

返回 top 属性 的 语法 格式 如 下 : 

Object.style.top 

例如 ， 设 置 id 属性 值 为 demo 的 元 素 到 页 面 项 端的 距离 为 100 像素 ， 代 码 如 下 : 


<div id="demo" style="position: absolute:"> 明 天 会 更 好 </div> 
<script type="textjjavascript"> 

document.getElementByld("demo").style.top="100px"; 
</script> 


运行 结果 如 图 11.9 所 示 。 
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JavaScript 明天 会 更 好 明天 会 更 好 


图 11.7 设置 不 透明 度 11.8 设置 lef 属性 11.9 设置 top 属性 
(5) display 属性 

display 属性 用 于 设置 或 返回 元 素 的 显示 类 型 。 该 属性 允许 用 户 显示 或 隐藏 一 个 元 素 ， 与 visibility 
属性 类 似 。 不 同 的 是 : 设置 display:none， 会 隐藏 整个 元 素 ; 设置 visibility:hidden， 元 素 内 容 虽 不 可 见 ， 
但 会 保留 原来 的 位 置 和 大 小 。 

设置 display 属性 的 语法 格式 如 下 : 

Object.style.display="value" 

返回 display 属性 的 语法 格式 如 下 : 

Object.style.display 

display 属性 的 可 选 值 及 其 说 明 如 表 11.2 所 示 。 

表 11.2 display 属性 的 可 选 值 及 说 明 


属 性 说 明 
block 设置 元 素 为 块 级 元 素 
compact 设置 元 素 为 块 级 元 素 或 内 联 元 素 ， 取 决 于 上 下 文 
inherit display 属性 值 从 父 元 素 继承 
inline 默认 ， 设 置 元 素 为 内 联 元 素 
inline-block 设置 元 素 为 内 联 盒子 内 的 块 盒子 
inline-table 设置 元 素 为 内 联 表格 (类 似 于 <table>) ， 表 格 前 后 没有 换行 符 
list-item 设置 元 素 为 列表 
marker 在 盒子 前 后 设置 内 容 为 标记 (与 :before 和 :after 伪 元 素 一 起 使 用 , 否则 该 值 与 inline 相同 ) 
none 设置 元 素 不 会 被 显示 
run-in 设置 元 素 为 块 级 或 内 联 元 素 ， 取 决 于 上 下 文 
table 设置 元 素 为 块 级 表格 (类 似 于 <table>) ， 表 格 前 后 带 有 换行 符 
table-caption 设置 元 素 为 表格 标题 (类 似 于 <caption>) 
table-cell 设置 元 素 为 表格 单元 格 (类似 于 <td> 和 <th>) 
table-column 设置 元 素 为 表格 列 〈 类 似 于 <col>) 
table-column-group 设置 元 素 为 一 个 或 多 个 列 的 分 组 (类 似 于 <colgroup>) 
table-footer-group 设置 元 素 为 表格 页 脚 行 ( 类 似 于 <tfoot>) 
table-header-group 设置 元 素 为 表格 页 眉 行 (类 似 于 <thead>) 
table-row, 设置 元 素 为 表格 行 〈 类 似 于 <tr>) 
table-row-group 设置 元 素 为 一 个 或 多 个 行 的 分 组 (类 似 于 <tbody>) 
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例如 ， 单 击 “隐藏 文本 ”按钮 时 设置 文本 隐藏 ， 代 码 如 下 : 


<script type="text/javascript"> 
function hiddenText(){ 
document.getElementByld("demo").style.display="none"; 
} 
</script> 
<input type="button" onclick="hiddenText()" value=" 隐 藏 文本 "> 
<p id="demo"> 天 生 我 材 必 有 用 </p> 


运行 结果 如 图 11.10 和 图 11.11 所 示 。 


隐 茂 文本 | 隐藏 文本 
天 生 我 材 必 有 用 


图 11.10 原始 效果 图 11.11 文本 隐藏 


(6) paddingLeft 属性 

paddingLeft 属性 可 以 设置 或 返回 元 素 的 左 内 边 距 。 

设置 paddingLeft 属性 的 语法 格式 如 下 : 
Object.style.paddingLeft="% llengthlinherit" 

加 ”%: 定义 左 内 边 距 基于 父 元 素 宽度 的 百分比 。 

回 length: 使 用 px、cm 等 单位 定义 左 内 边 距 的 宽度 。 

回 inherit， 左 内 边 距 从 父 元 素 继承 。 

返回 paddingLeft 属性 的 语法 格式 如 下 : 

Object.style.paddingLeft 

例如 ， 设 置 id 为 show 的 元 素 的 左 内 边 距 为 100px， 代 码 如 下 : 


<script type="text/javascript"> 
document.getElementByld("show").style.paddingLeft="100px"; 
</script> 


15. 图 像 对 象 简介 


(1) 什么 是 图 像 对 象 

Document 对 象 的 images 属性 的 返回 值 是 一 个 数组 ， 其 中 的 每 个 元 素 都 是 一 个 Image 对 象 。Image 
对 象 就 是 图 像 对 象 .HTML 文档 中 可 能 会 存在 多 张 图 片 , 加载 文档 时 , JavaScript 会 自动 创建 一 个 images[] 
数组 ， 数 组 中 的 元 素 个 数 是 由 文档 中 <img> 标 签 的 个 数 决定 的 。images[] 数 组 中 的 每 个 元 素 都 代表 着 文 
档 中 的 一 张 图 片 。 

在 操作 图 像 对 象 之 前 ， 首 先 应 当 确定 要 引用 的 图 片 。JavaScript 中 有 3 种 引用 图 片 的 方式 ， 分 别 
如 下 : 

回 ”通过 document.images[] 按 编号 访问 图 片 ， 如 document. images[0]。 
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回 ”通过 document.images[imageName] 按 名 称 访问 图 片 ， 如 document.images["book"]。 
回 ”在 支持 DOM 的 浏览 器 中 ， 使 用 document.getElementById("imageID") 定 位 要 访问 的 图 片 。 
例如 ， 页 面 中 有 一 张 图 片 ， 代 码 如 下 : 


<img name="flower" id="mypic" src="flower.png"> 


要 引用 该 图 片 ， 可 以 使 用 document.images[0]、document.images["flower"] 或 者 document.getElement 


Byld("mypic")3 种 方式 。 


到 
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(2) width 属性 和 height 属性 
在 图 像 对 象 中 ，width 属性 可 以 设置 或 者 返回 图 片 的 宽度 ，height 属性 可 以 设置 或 者 返回 图 片 的 


; 度 。 


width 属性 的 语法 格式 如 下 : 

imageObject.width=pixels 

height 属性 的 语法 格式 如 下 : 

imageObject.height=pixels 

例如 ， 单 击 “ 改 变 图 片 大 小 ”按钮 时 ， 设 置 图 片 的 宽度 和 高 度 为 300 像素 ， 代 码 如 下 : 


<script type="text/javascript"> 
function changeSize(){ 
document.getElementByld("mypic").width="300"; 
document.getElementByld("mypic").height="300"; 
由 
</script> 
<img id="mypic" src="face.png" border="1"><br> 
<input type="button" onclick="changeSize()" value=" 改 变 图 片 大 小 "> 


运行 结果 如 图 11.12 和 图 11.13 所 示 。 


改变 图 片 大 小 改变 图 片 大 小 


图 11.12 原 图 效果 图 11.13 大 图 效果 
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16. offsetLeft、offsetTop 、offsetWidth 、offsetHeight 属性 


offsetLeft: 元 素 左 外 边框 到 已 设置 定位 属性 的 父 元 素 左 内 边框 之 间 的 像素 距离 。 如 果 父 元 素 中 没 
有 定位 元 素 ， 就 返回 相对 于 body 左边 缘 的 距离 。 

offsetTop: 元 素 上 外 边框 到 已 设置 定位 属性 的 父 元 素 上 内 边框 之 间 的 像素 距离 。 如 果 父 元 素 中 没 
有 定位 元 素 ， 就 返回 相对 于 body 上 边缘 的 距离 。 

offsetWidth: 元 素 在 水 平方 向 上 占用 的 空间 大 小 ， 单 位 是 像素 。 包 括 元 素 的 宽度 、 左 右 内 边 距 宽 
度 以 及 左右 边框 的 宽度 。 

offsetHeight: 元 素 在 垂直 方向 上 占用 的 空间 大 小 ， 单 位 是 像素 。 包 括 元 素 的 高 度 、 上 下 内 边 距 高 
度 以 及 上 下 边框 的 高 度 。 


17. scrollLeft、scrollTop 属性 


scrollLeft: 返回 或 者 设置 元 素 内 容 向 左 滚动 的 距离 。 该 值 是 一 个 数字 ， 单 位 是 像素 。 
scrollTop: 返回 或 者 设置 元 素 内 容 向 上 滚动 的 距离 。 该 值 是 一 个 数字 ， 单 位 是 像素 。 


18. 直接 创建 自 定义 对 象 的 方法 


直接 创建 自 定义 对 象 的 语法 格式 如 下 : 
var 对 象 名 = {属性 名 1: 属 性 值 1, 属 性 名 2: 属 性 值 2, 属 性 名 3: 属 性 值 3.…..} 


直接 创建 自 定义 对 象 时 ， 所 有 属性 都 放 在 大 括号 中 ， 属 性 之 间 用 逗号 分 阳 ， 每 个 属性 都 由 属性 名 
和 属性 值 两 部 分 组 成 ， 属 性 名 和 属性 值 之 间 用 冒号 隔 开 。 
例如 ， 创 建 一 个 学 生 对 象 sudent， 并 设置 3 个 属性 ， 分 别 为 name、sex 和 age， 然 后 输出 这 3 个 属 
性 的 值 ， 代 码 如 下 : 
<script type="text/javascript"> 
var student = { 
name:" 张 三 "， 
Sex:" 男 "， 
age:25 


} 
document.write(" 姓 名 : "+student.name+"<br>"); 
document.write(" 性 别 : "+student.sex+"<br>"); 
document.write(" 年 龄 : "+student.age); 
</script> 
运行 结果 : 
姓名 : 张 三 
性 别 : 男 
年 龄 : 25 
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实战 技能 强化 训练 


训练 一 : 基本 功 强 化 训练 
1. 输出 自动 柜员 机 客户 凭 条 POOQOOOO 


输出 自动 柜员 机 客户 凭 条 信息 , 实现 效果 如 图 11.14 所 示 。 注意 , 将 客户 赁 条 中 的 交易 日 期 及 时 间 、 
受理 银行 行 号 、ATM 编号 、 交 易 序号 、 银 行 卡号 、 金 额 和 手续 费 分 别 定义 在 变量 中 。 


2. 输出 《 九 阳 神 功 》 口 诀 POOOOOO 
应 用 <pre> 标 签 和 转 义 字符 输出 《 九 阳 神功 》 中 的 口诀 ， 实 现 效果 如 图 11.15 所 示 。 
自动 柜员 机 客户 赁 条 
友和 RH 36 “| 现 弄 根 行 行 号 0313 
ATI 闹 号 19060236 交易 序号 002696 他 强 任 他 强 ， 清 风 抚 山冈 
卡号 6214832665693694k4tk 他 榜 由 他 檬 ， 明 月 照 大 江 
他 自 狠 来 他 自 亚 ， 我 自 一 口 真 气 足 
金额 300.00 手续 费 0.00 
转 入 卡号 /账号 一 一 《 轧 阳 神功 》 哇 
图 11.14 输出 自动 柜员 机 客户 赁 条 图 11.15 输出 《 九 阳 神 功 》 口 诀 
3. 计算 存款 本 息 合计 POOOOOO 


假设 某 银行 定期 存款 3 年 的 年 利率 为 2.75%， 某 客户 的 存款 金额 为 10000 元 ， 计 算 该 客户 存款 3 
年 后 的 本 息 合计 是 多 少 ， 实 现 效果 如 图 11.16 所 示 。 
(提示 : 本 息 合计 = 存款 金额 + 存款 金额 * 年 利率 * 存 款 期 限 ) 


存款 全 额 (元 ) 


存款 期 限 (年 ) 


年 利率 (%) 


本 息 合 计 ( 元 ) 10825 


图 11.16 计算 存款 本 息 合 i 
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4. 计算 身体 质量 指数 POOQOOOO 


身体 质量 指数 (BMI) 是 目前 国际 上 常用 来 衡量 人 体 胖 瘦 程 度 以 及 是 否 健 康 的 一 个 标准 。BMI 值 
低 于 18.4 表示 身体 偏 瘦 ，BMI 值 在 18.5 到 23.9 之 间 表 示 体重 正常 ，BMI 值 在 24 到 27.9 之 间 表 示 体 
重 过 重 ，BMI 值 高 于 28 表示 身体 肥胖 。 

试 着 编写 一 个 计算 BMI 的 程序 。 在 文本 框 中 输入 身高 和 体重 ， 通 过 计算 BMI 值 判断 身体 状态 ， 
实现 效果 如 图 11.17 和 图 11.18 所 示 。 


. BMI 中 国标 准 
计算 你 的 身体 质量 指数 (BMI) 
分 类 BMI 范 围 
我 的 高 :| ”| 单位 : 厘米 cm 偏 大 <=184 
- 一 一 18.5 ~ 23.9 
我 的 体重 : | 单位 : 千克 kg Ey 
一 一 一 一 过 重 240 ~ 27.9 
ee E20 


图 11.17 BMI 页 面 效果 


计算 你 的 身体 质量 指数 (BMDI) 


&2 你 的 BMI 值 : 21.0， 身 体 状 志 : 正常 <= 18.4 
[ 18.5 ~ 23.9 


单位 : 厘米 cm 
- 24.0 ~ 27.9 


单位 : 干 克 kg 


图 11.18 计算 BIM 结果 
5. 查看 你 是 什么 星座 POOOOOO 


试 着 编写 一 个 查看 星座 的 程序 。 将 用 户 输入 的 出 生日 期 与 十 二 星座 起 止 日 期 进行 比 对 ， 判 断 用 户 
属于 哪个 星座 。 在 文本 框 中 输入 出 生 月 份 和 出 生日 期 ， 单 击 “ 查 看 结果 ”按钮 可 查看 所 属 星座 ， 实 现 
效果 如 图 11.19 和 图 11.20 所 示 。 

(提示 : 在 计 语 句 中 对 输入 的 月 份 、 日 期 和 各 个 星座 对 应 的 月 份 和 日 期 进行 比较 ) 


判断 你 是 什么 星座 

你 的 星 应 : 巨 顽 座 
出 生 月 份 : | 6 1-12 
出生 期: | 3 |1-31 


图 11.19 查看 星座 (1) 图 11.20 查看 星座 (2) 
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6. 输出 由 “*” 组 成 的 空心 菱形 POOQOOOO 


编写 程序 ， 输 出 由 “*” 组 成 的 空心 凌 形 图 案 ， 效 果 如 图 11.21 所 示 。 
(提示 : 在 for 语句 中 嵌 套 使 用 for 语句) 


7. 商品 抢购 倒计时 POOQOQOOO 


各 大 购物 网 站 在 双 十 一 时 都 会 推出 商品 抢购 活动 ， 用 户 在 规定 的 时 间 内 才 可 以 抢购 或 秒杀 到 某 些 商 
品 。 编 写 程序 , 模拟 购物 网 站 中 商品 抢购 以 及 商品 秒杀 倒计时 的 功能 , 实现 效果 如 图 11.22 和 图 11.23 所 示 。 

(提示 : 使 用 “两 个 时 间 相 隔 的 毫秒 数 /(24*60*60*1000)”， 并 应 用 floor0 方 法 获得 相隔 的 天 数 ， 
然后 使 用 “两 个 时 间 相 隔 的 毫秒 数 %(24*60*60*1000)/(60*60*1000)) ”， 并 应 用 floor0 方 法 获得 剩余 
的 小 时 数 ， 以 此 类 推 ， 根 据 相 同 的 方法 获得 剩余 的 分 钟 数 和 秒 数 ) 


六 
站 站 
音 王 7 呈 
* 不 
索 * 
3 
商品 抢购 即将 开始 商品 正在 秒杀 
距 开 始 00:15:56 距 结 束 00:23:56 
图 11.21 输出 空心 蓉 形 图 11.22 商品 抢购 倒计时 图 11.23 ”商品 秒杀 倒计时 
8. 播放 歌曲 权限 设置 POOOOOO 


模拟 音乐 网 站 中 不 登录 就 无 法 播放 歌曲 的 权限 设置 及 弹出 提示 功能 。 单 击 歌曲 对 应 的 播放 按钮 ， 
将 弹出 “只 有 会 员 才能 播放 歌曲 ， 请 登录 ! ”提示 对 话 框 ， 效 果 如 图 11.24 所 示 。 


序号 歌曲 名 称 主唱 。 歌曲 简介 下 载 。 ”在 线 试听 


图 11.24 播放 歌曲 权限 
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9. 计算 从 出 生 到 现在 度 过 的 时 间 >Oog@ooo@ 


计算 自己 从 出 生 到 现在 度 过 了 多 长 时 间 。 在 3 个 文本 框 中 分 别 输入 出 生年 份 、 出 生 月 份 和 出 生日 
期 ， 输 入 完毕 之 后 单 击 “ 计 算 ” 按 钮 ， 下 方 文本 框 中 将 显示 用 户 到 当前 为 止 已 度 过 的 时 间 。 实 现 效果 
如 图 11.25 所 示 。 


请 输入 出 生年 月 日 : [1990 ”| 年 B 月 BB ”|B|HH 算 | 


从 你 出 生 到 目前 为 止 ， 你 已 度 过 


10770 天 >>>13 小 时 >>>24 分 >>>16 秒 


图 11.25 计算 从 出 生 到 现在 度 过 的 时 间 
10. 输出 2018 年 内 地 电影 票房 排行 榜 POOOOOO 


将 2018 年 内 地 电影 票房 排行 榜 前 十 名 的 影片 名 称 和 票房 定义 在 数组 中 , 按 影片 票房 进行 降序 排序 ， 
并 将 排序 后 的 影片 排名 、 影 片 名 称 和 票房 输出 在 页 面 中 。 实 现 效果 如 图 11.26 所 示 。 


排名 电影 名 称 票房 
1 红海 行动 36.5 
2 唐人 街 控 案 2 33.9 
3 我 不 是 药 神 30.9 
4 西 果 市 首富 25.4 
5 复仇 者 联盟 3 : 无 限 战争 23.9 
6 捉 妖 记 2 223 
7 海王 195 
8 毒液 : 致命 守护 者 187 
9 件 罗 纪 世 界 2 16.9 
10 头号 玩家 139 


11.26 2018 年 内 地 电影 票房 排行 榜 


训练 二 : 实战 能 力 强化 训练 
11. 灯泡 点 亮 与 炸 灭 POOOOOO® 


设计 一 个 点 亮 灯 泡 和 熄灭 灯泡 的 动画 效果 。 当 和 鼠标 光标 在 灯泡 上 按 下 时 ， 灯 泡 被 点 亮 ， 当 鼠标 光 
标 在 灯泡 上 松 开 时 ， 灯 泡 被 熄灭 ， 效 果 如 图 11.27 和 图 11.28 所 示 。 
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12. 抽 屠 风格 的 滑 出 菜单 >OoG@e@oe@ 


实现 抽 居 风格 的 滑 出 菜单 。 在 页 面 中 输出 一 个 竖 向 的 导航 菜单 ， 当 鼠标 移 到 某 个 菜单 项 上 时 ， 该 
菜单 项 会 向 右 滑 出 ; 当 鼠 标 移 出 菜单 项 时 ,该 菜单 项 会 恢复 为 初始 状态 。 实 现 效果 如 图 11.29 和 图 11.30 
所 示 。 

(提示 : 应 用 event 对 象 的 target 属性 获取 发 生 事件 的 元 素 ) 


i Android 讨 论 区 

he 

滞 Pythoniie 区 

图 11.27 点 亮 灯泡 图 11.28 熄灭 灯泡 图 11.29 初始 菜单 图 11.30 抽 层 滑 出 效果 


13. 切换 表情 图 片 POOOOOO 


定义 5 个 表示 不 同 表 情 的 单 选 按 钮 ,通过 单 击 不 同 的 单 选 按钮 实现 表情 图 片 的 切换 ,效果 如 图 11.31 
和 图 11.32 所 示 。 
图 发 呆 目 困 刁难 过 和 调皮 目 栈 发呆 刁 困 全 难过 加 调皮 日 栈 


(= 


11.31 发 果 表情 11.32 ”调皮 表情 


14. 为 图 片 添加 和 移 除 模糊 效果 >Ooo@oo@oe@ 


通过 改变 图 片 的 不 透明 度 ， 实 现 图 片 的 模糊 效果 。 当 鼠标 移入 图 片 时 ， 改 变 图 片 的 不 透明 度 ; 当 
鼠标 移出 图 片 时 ， 恢 复 图 片 的 初始 清晰 度 ， 效 果 如 图 11.33 和 图 11.34 所 示 。 
(提示 : 在 事件 处 理 函 数 中 应 用 style 对 象 的 opacity 属性 设置 元 素 的 不 透明 度 ) 


Bs 


第 11 章 “ JavaScript 基础 


15. 简单 计算 器 POOQOQOOO 


制作 一 个 简单 的 计算 器 。 通过 该 计算 器 可 以 对 数值 进行 加 、 减 、 乘 、 除 等 运算 , 实现 效果 如 图 11.35 
和 图 11.36 所 示 。 
(提示 : 在 单 击 事件 的 处 理 函 数 中 应 用 eval0 方 法 计算 运算 结果 ) 


加 和 5*6+6 C 36 C 
s JavaScript 
” 精彩 编程 2006 精彩 编程 200e Wal esl Rl CA wa a El 

; 上 国 圈 回力 国 图 国民 

a Bal (3 加 ly 攻 | 

3 | 0 = | Bk 0 | 

图 11.33 鼠标 移入 图 11.34 鼠标 移出 图 11.35 输出 算式 图 11.36 计算 结果 
16. 随意 摆 放 的 照片 墙 POOOOOO 


实现 图 片 在 页 面 中 随意 摆 放 的 功能 。 在 页 面 中 显示 3 张 旋转 一 定 角度 的 图 片 ， 通 过 拖 动 图 片 可 以 
在 页 面 中 随意 摆 放 照片 。 实 现 效果 如 图 11.37 所 示 。 
(提示 : 应 用 和 鼠标 事件 中 的 onmousedown、onmousemove 和 onmouseup 事件 ) 


图 11.37 随意 摆 放 的 照片 墙 
17. 模拟 画图 软件 调整 图 片 大 小 POOOOOO 
应 用 Windows 系统 自 带 的 画图 软件 ， 可 对 图 片 的 大 小 进行 调整 。 编 写 程序 ， 模 拟 画 图 软件 中 调整 


图 片 大 小 的 功能 。 效 果 如 图 11.38 和 图 11.39 所 示 。 
(提示 : 应 用 图 像 对 象 的 width 属性 和 height 属性 ， 设 置 图 片 的 宽度 和 高 度 ) 
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上 百分比 全 像素 
水 平 : [00 

垂直: [100 | 
加 保持 纵横 比 [ 博 定 ] 


11.38 ”100% 显 示 效 果 图 11.39 ” 50% 显示 效果 


18. 图 片 放 大 镜 效 果 POOOOOO 


在 电子 商城 中 选 购 商 品 时 ， 单 击 商品 主 图 ， 有 时 会 看 到 放大 显示 的 商品 图 片 。 编 写 程序 ， 模 拟 电 
子 商城 中 图 片 放大 镜 的 功能 。 当 鼠标 光标 移 到 商品 图 片 某 一 区 域 上 时 ， 右 侧 会 对 该 区 域 进行 放大 显示 ， 
效果 如 网 11.40 所 示 。 

(提示 : 应 用 left 和 top 属性 对 元 素 进行 定位 ) 


11.40 图 片 放 大 镜 效果 


19. 显示 选择 的 酒店 类 型 >Oooooe 
在 酒店 预订 网 站 中 通常 会 事先 筛选 出 一 些 可 供 选择 的 酒店 类 型 ， 如 商务 酒店 、 快 捷 酒 店 等 ， 用 户 
可 以 根据 自己 的 需要 选择 适合 的 酒店 类 型 。 编 写 程序 ， 应 用 复 选 框 定义 多 种 酒店 类 型 ， 用 户 通过 单 击 
复 选 框 选择 需要 的 类 型 ， 选 择 的 酒店 类 型 将 输出 在 下 方 页 面 中 ， 效 果 如 图 11.41 所 示 。 
(提示 : 在 复 选 框 的 单 击 事件 中 应 用 for 语句 和 checked 属性 判断 哪些 复 选 框 已 被 选中 ) 
酒店 类 型 : 口 酒店 式 公寓 四 连锁 品牌 口 家 庭 旅 信 “加 商 务 型 酒店 日 招待 所 四 客栈 日 青 年 旅舍 日 主题 酒店 
您 选择 的 类 型 : 连锁 品牌 商务 型 酒店 客栈 


图 11.41 选择 酒店 类 型 
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20. 切换 商品 类 别 选 项 卡 POOQOOOO 


设计 一 个 可 通过 选项 卡 切换 显示 不 同 商品 的 网 购 页 面 。 页 面 中 有 5 个 选项 卡 ， 分 别 代 表 不 同 的 类 
别 ， 当 鼠标 指向 不 同 选 项 卡 时 ， 页 面 下 方 会 显示 对 应 的 商品 信息 ， 效 果 如 图 11.42 和 图 11.43 所 示 。 
(提示 : 为 每 个 选项 卡 添加 onmouseover 事件 ， 并 设置 当前 选项 卡 对 应 的 商品 显示 信息 ) 


握 荐 司 品 故 门 再 喇 狂 鹤 到 欢 玖 评 丙 品 新 吕 上 乖 
®@ 
I i 
齐 师 刀 3 NB 式 注 是 机 扫地 机 闫 人 
ii ¥399.00 jl 199.00 5: ¥l999,00 lill: ¥709.00 
ER 
图 11.42 “推荐 商品 ”选项 卡 
淮 荐 同 函 故 门 两 品 ES 孜 评 南 品 新 号 上 汪 
i - pen 
ese tue 十 人 gs 
A RS 下 
/I 9 :1 
话 坟 耳机 移动 硒 俩 自拍 杆 要闻 飞 使 安 形 机 器 人 拍 六 得 相机 
a ¥138,00 市 ¥638.00 ¥38.00 ¥238.00 ¥936.00 


11.43 “ 热 评 商品 ”选项 卡 
21. 验证 用 户 登录 信息 是 否 为 空 POOOOOO 
设计 一 个 简单 的 用 户 登 录 页 面 。 当 用 户 名 或 密码 输入 框 为 空 时 ， 在 输入 框 右 侧 给 出 相应 的 提示 信 


息 ， 如果 输入 框 不 为 空 ， 判 断 用 户 是 否 登录 成 功 。 效 果 如 图 11.44 和 图 11.45 所 示 。 
(提示 : 为 “账号 ”输入 框 和 “密码 ”输入 框 添加 onblur 事件 ) 


登录 成 功 ! 
用 户 名 不 能 为 空 账号 : mr 


密码 不 能 为 空 密码 :| 一 ~ 


11.44 ”用 户 名 为 空 图 11.45 ”登录 成 功 
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22. 横向 导航 菜单 >Oog@ooo@ 


在 页 面 中 输出 一 个 横向 导航 菜单 ， 默 认 显 示 “ 交 通 出 行 ” 主 菜单 下 的 子 菜单 。 当 鼠标 光标 指向 其 
他 主 菜 单 时 ， 隐 藏 原子 菜单 显示 对 应 的 子 菜单 ， 效 果 如 图 11.46 和 图 11.47 所 示 。 
(提示 : 为 每 个 主 菜 单 添 加 onmouseover 事件 ， 并 设置 当前 主 菜单 对 应 的 子 菜单 ) 


交通 出 行 酒店 预订 旅游 度假 定制 旅游 
国内 机 票 


交通 出 行 酒店 预订 


11.47 选择 其 他 主 菜 单 


第 12 章 绘制 形 


本 章 训练 任务 对 应 核心 技术 分 册 第 12 章 “ 绘 制图 形 ”部 分 。 
重点 练习 内 容 : 


. 绘制 直线 。 
.绘制 曲线 。 
.绘制 圆 形 。 
.图 形 平移 、 缩 放 和 旋转 。 
.输出 文字 。 


ww wb 一 


应 用 技能 拓展 学 习 


.Sin() 方 法 和 cos() 方 法 


(1) sin0 方 法 
sin0 方 法 是 Math 对 象 中 的 方法 ， 可 返回 一 个 数字 的 正弦 值 。 返 回 值 范围 是 -1.0 一 1.0。 语 法 如 下 : 
Math.sin(x) 


参数 x 为 必 选 参数 ， 是 一 个 以 弧度 表示 的 角 。 将 角度 乘 以 0.017453293 (2PI360) ， 即 可 转换 为 弧度 。 
(2) cos0 方 法 

cos0 方 法 是 Math 对 象 中 的 方法 ， 可 返回 一 个 数字 的 余弦 值 。 返 回 值 范围 是 -1.0 一 1.0。 语 法 如 下 : 
Math.cos(x) 


参数 x 为 必 选 参数 ， 是 一 个 以 弧度 表示 的 角 。 将 角度 乘 以 0.017453293 〈2PI360) ， 即 可 转换 为 弧度 。 
例如 ， 分 别 应 用 sin0 方 法 和 cos0 方 法 输出 两 个 弧度 的 正弦 值 和 余弦 值 。 代 码 如 下 : 
<script type="text/javascript"> 

var a=Math.sin(90*Math.Pl/180); 

var b=Math.cos(Math.Pl); 

document.write(a+"<br>"+b); 
</script> 
运行 结果 : 1 

= 
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2. 状态 的 保存 和 恢复 


状态 保存 和 状态 恢复 是 绘制 复杂 图 形 时 必 不 可 少 的 操作 ， 需 要 用 到 save0 和 restore(0) 方 法 。save0 
方法 用 于 保存 当前 环境 的 状态 ，restore0 方 法 用 于 返回 之 前 保存 过 的 路 径 状 态 和 属性 。 这 两 个 方法 都 没 
有 参数 。 

下 面 来 看 一 个 示例 。 


<script type="text/javascript"> 
window.onload=function(}{ 
var canvas = document.getElementByld("canvas"); 
Var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "red™; 
ctx.save(); /保存 当前 状态 
ctx.beginPath(); 
ctx.fillRect(20,20, 100, 100); 
ctx.fillStyle = 'green'; 
ctx.fillRect(150, 150, 100, 100); 
ctx.restore(); /| 恢复 之 前 保存 的 状态 
ctx.fillRect(280, 280, 100, 100); 
. 
</script> 
<canvas id="canvas" width="400" height="400" style="border 1px solid #ccc;"></canvas> 


运行 结果 如 图 12.1 所 示 。 


12.1 保存 和 恢复 状态 


3. onwheel 事件 
鼠标 滚轮 在 元 素 上 滚动 时 触发 onwheel 事件 。 
onwheel 事件 在 HIML 中 的 语法 格式 如 下 : 
<element onwheel="myScript"> 
onwheel 事件 在 JavaScript 中 的 语法 格式 如 下 : 
object.onwheel=function(){myScript}; 
例如 ， 当 在 元 素 上 滚动 鼠标 滚轮 时 ， 设 置 元 素 字体 大 小 为 36px， 代 码 如 下 : 
<div id="demo"> 和 欲 穷 千里 目 ，<br> 更 上 一 层 楼 。</div> 
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<script type="text/javascript"> 
document.getElementByld("demo").onwheel=myFunction; 
function myFunction() { 
document.getElementByld("demo").style fontSize = "36px"; 
让 
</script> 


4. zoom 属性 


zoom 属性 是 style 对 象 中 的 一 个 属性 ， 可 以 设置 或 检索 对 象 的 缩放 比例 。 语 法 如 下 : 
Object.style.zoom=normal | number 


回 normal: 使 用 对 象 的 实际 尺寸 。 
回 number: 使 用 百分数 或 者 无 符号 浮 点 实数 。 无 符号 浮 点 实数 值 为 1.0 或 百分数 为 100% 时 ， 相 
当 于 此 属性 的 normal 值 。 
例如 ， 在 元 素 上 滚动 鼠标 滚轮 时 ， 设 置 元 素 的 放大 比例 为 300%， 代 码 如 下 : 
<div id="demo"> 和 欲 穷 千里 目 ，<br> 更 上 一 层 楼 。</div> 
<script type="text/javascript"> 
document.getElementByld("demo").onwheel=myFunction; 
function myFunction() { 


document.getElementByld("demo").style.zoom = "300%"; 


; 
</script> 


5. createPattern() 方 法 


createPattern() 方 法 可 在 指定 的 方向 上 重复 指定 的 元 素 。 元 素 可 以 是 图 片 、 视 频 或 者 其 他 <canvas> 
元 素 。 语 法 如 下 : 
context.createPattern(image,type); 


image 参数 为 要 重复 的 图 片 、 画 布 或 视频 元 素 ; type 参数 的 值 必须 是 下 面 的 字符 串 之 一 : 
回 repeat: 默认 值 ， 表 示 在 水 平和 垂直 方向 均 重 复 。 
回 repeat-x: 表示 只 在 水 平方 向 重复 。 
回 repeat-y: 表示 只 在 垂直 方向 重复 。 
回 “no-repeat: 表示 只 显示 一 次 (不 重复 )。 
例如 ， 在 画布 中 对 指定 图 像 进 行 重复 显示 。 代 码 如 下 : 
<canvas id="canvas" width="400" height="300" style="border: 1px solid #ccc;"></canvas> 
<script type="text/javascript"> 
var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext('2d"); 
var image = new Image(); 
image.src = "imagemr.jpg"; 
image.onload = function(X 
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var ptrn = context.createPattern(image, repeat ); 
context.fillStyle = ptrn; 
context.fillRect(0,0,400,300); 
和 
</script> 


运行 结果 如 图 12.2 所 示 。 


12.2 重复 显示 图 像 


.绘制 阴影 


HIML5 中 ， 使 用 canvas 元 素 可 以 给 图 形 添加 阴影 效果 。 通 过 设置 图 形 上 下 文 对象 的 4 个 阴影 绘 


制 属性 ， 可 以 添加 不 同 的 阴影 效果 。 


shadowOffsetX: 指定 阴影 的 横向 位 移 量 。 

shadowOffsetY: 指定 阴影 的 纵向 位 移 量 。 

回 ”shadowBlur: 指定 阴影 边缘 的 模糊 范围 。 

回 ”shadowColor: 指定 阴影 的 颜色 。 

shadowOffsetX 和 shadowOffsetY 用 来 设 定 阴 影 在 X 轴 和 立轴 的 延伸 距离 。 负 值 表示 阴影 会 往 上 或 


左 延 伸 ， 正 值 则 表示 阴影 会 往 下 或 右 延伸 ， 其 默认 值 均 为 0。 


shadowBlur 用 于 设 定 阴影 的 模糊 程度 。 不 希望 阴影 的 边缘 太 清晰 时 可 以 使 用 该 属性 。 该 属性 值 必 


须 设 定 为 比 0 大 的 数字 ， 否则 将 被 忽略 。 一 般 设 定 在 0 一 10 之 间 ， 开 发 时 可 以 根据 情况 调整 这 个 数值 ， 
以 达到 满意 效果 。 
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shadowColor 用 于 设 定 阴 影 效 果 的 颜色 ， 值 可 以 是 标准 的 CSS 颜色 值 ， 默 认 是 全 透明 的 黑色 。 
例如 ， 为 文字 “天 生 我 材 必 有 用 ”设置 阴影 效果 ， 代 码 如 下 : 


<canvas id="canvas" width="300" height="100"></canvas> 
<script type="text/javascript"> 


var context = document.getElementByld('canvas'").getContext("2d"); 
context.shadowOffsetX = 3; 

context.shadowOffsetY = 3; 

context.shadowBlur = 6; 

context.shadowColor = "rgba(255, 0, 0, 0.5)"; 

context.font = "30px 宋体 "; 

context.fillStyle = "blue"; 

context.fillText(" 天 生 我 材 必 有 用 ", 60, 30); 


</script> 
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天 生 我 材 必 有 用 


图 12.3 设置 阴影 效果 


运行 结果 如 图 12.3 所 示 。 


7. clearRect() 方 法 


clearRect(O 方法 用 于 清空 给 定 和 矩形 内 的 指定 像素 。 语 法 格式 如 下 : 
context.clearRect(x,y,width,height); 


回 x: 要 清除 的 矩形 左上 角 的 x 坐标 。 
回 y: 要 清除 的 矩形 左上 角 的 y 坐标 。 
回 width: 要 清除 的 矩形 的 宽度 ， 单 位 为 像素 。 
加 ”height: 要 清除 的 矩形 的 高 度 ， 单 位 为 像素 。 
例如 ， 在 给 定 和 矩形 内 清空 一 个 矩形 ， 代 码 如 下 : 
<canvas id="canvas" width="300" height="200"></canvas> 
<script type="text/javascript"> 
var canvas=document.getElementByld("canvas"); 
var ctx=canvas.getContext("2d"); 
ctx.fillStyle="green"; 
ctx.fillRect(0,0,300,200); 
ctx.clearRect(50,50,100,80); 
</script> 


运行 结果 如 图 12.4 所 示 。 


图 12.4 清空 一 个 矩形 
8. Date 对 象 中 的 几 个 方法 


(1) ”getHours0 方 法 
Date 对 象 提供 的 getHours0 方 法 可 以 返回 时 间 的 小 时 字段 , 返回 值 是 0 一 23 的 一 个 整数 。 语法 格式 
如 下 : 
dateObj.getHours() 


参数 dateObj 为 创建 的 Date 对 象 名 。 
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例如 ， 输 出 当前 时 间 的 小 时 数 ， 代 码 如 下 : 


<script type="text/javascript"> 
var now = new Date(); 
Var h = now.getHours(); 
document.write(h); 
</script> 
运行 结果 : 9 
(2) getMinutes0 方 法 
Date 对 象 提供 的 getMinutes0 方 法 可 以 返回 时 间 的 分 钟 字段 , 返回 值 是 0 一 59 的 一 个 整数 。 语 法 格 
式 如 下 : 
dateObj.getMinutes() 


参数 dateObj 为 创建 的 Date 对 象 名 。 
例如 ， 输 出 当前 时 间 的 分 钟 数 ， 代 码 如 下 : 
<script type="text/javascript"> 
Var now = new Date(); 
var m = now.getMinutes(); 
document.write(m); 
</script> 


运行 结果 : 58 
(3) getSeconds0 方 法 
Date 对 象 提 供 的 getSeconds0 方 法 可 以 返回 时 间 的 秒 字 段 , 返回 值 是 0 一 59 的 一 个 整数 。 语 法 格式 
如 下 : 
dateObj.getSeconds() 


参数 dateObj 为 创建 的 Date 对 象 名 。 
例如 ， 输 出 当前 时 间 的 秒 数 。 代 码 如 下 : 


<script type="text/javascript"> 
Var now = new Date(); 
var s = now.getSeconds(); 
document.write(s); 
</script> 


运行 结果 : 10 
(4) getMilliseconds0 方 法 
Date 对 象 提供 的 getMilliseconds0 方 法 可 以 返回 时 间 的 毫秒 字段 ， 返 回 值 是 0 一 999 的 一 个 整数 。 
语法 格式 如 下 : 
dateObj.getMilliseconds() 
参数 dateObj 为 创建 的 Date 对 象 名 。 
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例如 ， 输 出 当前 时 间 的 毫秒 数 ， 代 码 如 下 : 


<script type="text/javascript"> 
var now = new Date(); 
var ms = now.getMilliseconds(); 
document.write(ms); 

</script> 


运行 结果 : 396 
9. 数组 的 push() 方 法 


push() 方 法 用 于 向 数组 的 末尾 添加 一 个 或 多 个 元 素 ， 并 返回 添加 后 的 数组 长 度 。 语 法 格式 如 下 : 
arrayObject.push(newelement1 ,newelement2,....,newelementX) 


回 arrayObject: 必 选 项 ， 表 示 数 组 名 称 。 
回 newelement1: 必 选 项 ， 表 示 要 添加 到 数组 的 第 一 个 元 素 。 
回 newelement2: 可 选项 ， 表 示 要 添加 到 数组 的 第 二 个 元 素 。 
回 newelementX: 可 选项 ， 表 示 可 添加 的 多 个 元 素 。 
例如 ， 向 数组 的 末尾 添加 一 个 数组 元 素 ， 并 输出 新 数组 ， 代 码 如 下 : 
<script type="text/javascript"> 
var arr=new Array("JavaScript","HTML"); 
arr.push("CSS"); 
document.write(arr); 
</script> 


运行 结果 : JavaScript,HTML,CSS 
10. 在 canvas 中 应 用 layerX 和 layerY 属性 


在 canvas 中 ， 使 用 事件 对 象 中 的 layerX 和 layerY 属性 可 以 获取 元 素 在 发 生 事件 时 ， 鼠 标 相 对 于 
canvas 元 素 左上 角 的 横 坐 标 和 纵 坐 标 。 
例如 ， 当 鼠标 单 击 canvas 元 素 时 ， 获 取 鼠 标 在 canvas 元 素 中 的 位 置 。 代 码 如 下 : 
<canvas id="canvas" width="300" height="200" style="border 1px solid #000000"></canvas> 
<div id="show"></div> 
<script type="text/javascript"> 
var canvas=document.getElementByld("canvas"); 


canvas.onclick=function(evX{ 
show.innerHTML="X: "+ev.layerX+", Y: "+ev.layerY; 


} 
</script> 


运行 结果 如 图 12.5 所 示 。 
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X:91,Y:69 


图 12.5 获取 元 素 坐标 
11. min() 方 法 


min0 方 法 是 Math 对 象 中 的 方法 ， 可 以 返回 指定 数字 中 的 最 小 值 。 语 法 如 下 : 
Math.min(n1,n2,n3,...,nX) 

参数 n1,n2,n3,…,nX 表示 一 个 或 多 个 指定 数值 。 

例如 ， 输 出 5、6 和 9 三 个 数字 中 的 最 小 值 。 代 码 如 下 : 

<script type="text/javascript"> 


document.write(Math.min(5,6,9)); 
</script> 


运行 结果 : 5 
12. random() 方 法 


Math 对 象 的 random 方法 可 返回 0 (包含 ) 一 1 (不 包含 ) 的 一 个 随机 数 。 语 法 如 下 : 
Math.random() 
例如 ， 输 出 一 个 0~1 的 随机 数 。 代 码 如 下 : 
<script type="text/javascript"> 
document.write(Math.random()); 


</script> 


运行 结果 : 0.979182268421426 
13. requestAnimationFrame() 方 法 


requestAnimationFrame0 方 法 可 以 执行 一 个 动画 ， 并 且 要 求 浏览 器 在 下 次 重 绘 之 前 调用 指定 的 回调 
函数 ， 以 更 新 动画 。 该 方法 需要 传 入 一 个 回调 函数 作为 参数 ， 该 回调 函数 会 在 浏览 器 下 一 次 重 绘 之 前 
执行 。 语 法 格式 如 下 : 

window.requestAnimationFrame(callback); 

参数 callback 为 下 一 次 重 绘 之 前 更 新 动画 帧 所 调用 的 函数 。 
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例如 ， 应 用 requestAnimationFrame() 方 法 使 数字 不 断 地 快速 执行 加 1 操作 ， 代 码 如 下 : 


<div id="demo"></div> 
<script type="text/javascript"> 
var oDiv = document.getElementByld('demo'"); 
var num = 0; 
function account(X{ 
num++; 
oDiv.innerHTML = num; 
requestAnimationFrame(account); 


account(); 
</script> 


实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 
1. 绘制 火柴 人 >Ooeoee@ 


绘制 火柴 人 时 ， 将 人 抽象 成 火柴 的 形状 ， 头 部 类 似 于 火柴 头 ， 而 身体 和 四 肢 类似 于 火柴 杆 。 编 写 
程序 ， 应 用 canvas 绘制 一 个 火柴 人 ， 实 现 效果 如 图 12.6 所 示 。 


2. 绘制 红心 POOOOOO 


贝 塞 尔 曲 线 常 用 于 绘制 复杂 而 有 规律 的 形状 。 编 写 程序 ， 使 用 三 次 方 贝 塞 尔 曲线 绘制 一 个 红色 实 
心 的 红心 。 实 现 效 果 如 图 12.7 所 示 。 


3. 绘制 简易 房屋 POOOOOO 
应 用 canvas 绘制 一 个 简易 的 房屋 。 该 房屋 包括 屋顶 、 房 子 主体 、 门 和 窗 等 几 部 分 ， 效 果 如 图 12.8 
所 示 。 
图 12.6 绘制 火柴 人 图 12.7 绘制 红心 图 12.8 绘制 简易 房屋 
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4. 在 图 片上 输出 文字 POOQOOOO 
在 图 片上 显示 填充 文字 。 将 文字 “一 幅 美丽 的 风景 画 ” 输 出 在 图 片 中 ， 实 现 效果 如 图 12.9 所 示 。 
5. 绘制 向 日 葵 POOQOQOOO 


应 用 canvas 绘制 一 个 向 日 蓝 ， 效 果 如 图 12.10 所 示 。 
(提示 : 在 for 语句 中 应 用 lineTo0 方 法 绘制 直线 ) 


6. 在 画布 中 显示 图 片 POOOOOO 


通过 canvas 还 可 以 读 取 磁 盘 或 网 络 中 的 图 像 文件 ， 然 后 使 用 canvas API 将 图 像 绘制 在 画布 中 。 编 
写 程序 ， 在 canvas 画布 中 显示 一 张 指定 的 图 片 ， 效 果 如 图 12.11 所 示 。 


| 类 丽 的 风景 本 


图 12.9 在 图 片上 输出 文字 图 12.10 ”绘制 向 日 葵 图 12.11 在 画布 中 显示 图 片 
7. 通过 鼠标 滚轮 放大 和 缩小 图 片 >Oooeooe@ 


在 canvas 画布 中 显示 一 张 指 定 的 图 片 ， 并 使 用 鼠标 滚轮 放大 、 缩 小 图 片 。 当 用 户 将 鼠标 指针 移动 
到 图 片上 时 ， 图 片 会 获取 焦点 ， 滚 动 鼠标 滚轮 ， 即 可 改变 图 片 的 大 小 ， 实 现 效 果 如 图 12.12 和 图 12.13 
所 示 。 
(提示 : 应 用 onwheel 事件 、zoom 属性 和 scale() 方 法 ) 


图 12.12 放大 图 片 图 12.13 缩小 图 片 
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8. 制作 图 像 平 铺 效果 POOQOOOO 


所 谓 图 像 平 铺 ， 就 是 使 用 按 一 定 比 例 缩小 后 的 图 像 将 画布 填 满 。 编 写 程序 ， 应 用 canvas 实现 图 像 
的 平 铺 效 果 ， 如 图 12.14 所 示 。 


9. 制作 文字 阴影 效果 POOQOQOOO 


为 了 使 文字 更 加 美观 ,可 为 文字 添加 阴影 效果 。 编写 程序 , 为 文字 添加 阴影 效果 , 如 图 12.15 所 示 。 


1 
| 天 才 出 于 勤奋 | 


图 12.14 ”图 像 平 铺 效 果 图 12.15 文字 阴影 效果 


训练 二 : 实战 能 力 强 化 训练 


10. 绘制 别墅 与 树木 POOOOOO 
应 用 canvas 绘制 一 由 别墅 ， 在 别墅 两 旁 绘制 两 棵 树 ， 实 现 效果 如 图 12.16 所 示 。 
11. 制作 桌面 时 钟 POOOOOO 


试 着 应 用 图 形 路 径 、 变 形 以 及 动画 等 知识 制作 一 个 动态 的 桌面 时 钟 ， 实 现 效果 如 图 12.17 所 示 。 


图 12.16 绘制 别 旱 与 树木 图 12.17 ”桌面 时 钟 
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12. 小 车 的 移动 和 停止 POOLOOOO 


编写 程序 ， 实 现 小 车 前 进 和 停止 的 动画 效果 。 当 单 击 “ 前 进 ” 按 钮 时 ， 小 车 开始 向 前 移动 ， 当 单 
击 “ 停 止 ”按钮 时 ， 小 车 停止 移动 。 实 现 效果 如 图 12.18 和 图 12.19 所 示 。 
(提示 : 应 用 setInterval0 方 法 和 translate0 方 法 ) 


图 12.18 单 击 开始 前 进 图 12.19 停止 前 进 
13. 图 像 放 大 镜 POOOOOO 


实现 一 个 图 像 放大 镜 的 效果 。 当 鼠标 指向 图 片 时 ， 鼠 标 右 下 角 将 对 当前 区 域 进 行 放大 显示 ， 效 果 
如 图 12.20 和 图 12.21 所 示 。 
(提示 : 应 用 onmousemove 事件 和 drawImage() 方 法 ) 


图 12.20 原 图 效果 图 12.21 局 部 放大 效果 
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14. 制作 简易 写字 板 POOQOOOO 


编写 程序 ， 制 作 一 个 简易 的 写字 板 ， 写 字 效 果 如 图 12.22 所 示 。 
(提示 : 为 canvas 画布 分 别 应 用 onmousedown、onmousemove 和 onmouseup 事件 ) 


COQnVQS 


图 12.22 ”写作 板 效果 


15. 图 片 渐 隐 渐 现 效果 POOOOOO 


在 canvas 画布 中 显示 一 张 指定 的 图 片 ， 使 图 片 从 模糊 状态 变 为 清晰 状态 ， 然 后 又 从 清晰 状态 变 为 
模糊 状态 。 重 复 执行 此 操作 ， 使 图 片 形成 渐 隐 渐 现 的 效果 ， 如 图 12.23 和 图 12.24 所 示 。 
(提示 : 应 用 setInterval0 方 法 和 style 对 象 中 的 opacity 属性 ) 


图 12.23 模糊 图 片 12.24 清晰 图 片 


16. 图 像 局 部 放大 效果 POOOOO© 


编写 程序 ， 实 现 图 像 局 部 放大 的 功能 。 在 页 面 左 侧 的 图 像 中 拖 动 鼠标 选择 准备 放大 的 区 域 ， 在 页 
面 右 侧 会 显示 该 区 域 放 大 后 的 图 像 ， 效 果 如 图 12.25 所 示 。 


(提示 : 为 canvas 画布 应 用 onmousedown、onmousemove 和 onmouseup 事件 ) 


图 12.25 图 像 局 部 放大 效果 
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17. 下 雪 动 画 效果 POOOOOO 


编写 程序 ， 模 拟 下 雪 的 动画 效果 ， 如 图 12.26 所 示 。 
(提示 : 在 for 语句 中 应 用 arc() 方 法 绘制 不 同 半径 的 圆 形 ) 


图 12.26 下 雪 动 画 效果 


18. 地 球 绕 太阳 公转 效果 POOOOO© 


编写 程序 ， 模 拟 地 球 围绕 太阳 公转 的 效果 。 页 面 中 ， 太 阳 的 位 置 不 变 ， 地 球 按照 一 定 的 速度 沿 着 
圆 形 轨道 不 断 旋 转 ， 实 现 效 果 如 图 12.27 所 示 。 
应 用 iotate() 方 法 旋转 坐标 系 , 应 用 drawImage0 方 法 绘制 地 球 图 像 , 应 用 requestAnimation 
Frame() 方 法 实现 动画 效果 ) 


图 12.27 模拟 公转 效果 
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本 章 训练 任务 对 应 核心 技术 分 册 第 13 章 “ 文 件 与 拖 放 ”部 分 。 
重点 练习 内 容 : 


.应 用 file 对 象 获取 文件 。 
.获取 文件 的 类 型 与 大 小 。 
预览 图 片 。 

. 读 取 文 本 文件 。 

. 拖 放 文件 。 


wm wm 一 


应 用 技能 拓展 学 习 


.Math 对 象 的 两 个 方法 


(1) log0 方 法 

log0 方 法 用 于 返回 一 个 数 的 自然 对 数 〈 基 于 E) 。 语 法 格式 如 下 : 

Math.log(x) 

参数 x 为 必 选 项 ， 表 示 一 个 任意 数值 或 表达 式 。 

例如 ， 获 取 6 的 自然 对 数 ， 代 码 如 下 : 

<script type="text/javascript"> 
document.write(Math.log(6)); 

</script> 

运行 结果 : 1.791759469228055 

(2) pow0 方 法 

pow0 方 法 用 于 返回 x 的 y 次 窜 的 值 。 语 法 格式 如 下 : 

Math.pow(x,y) 

加 ”x: 必 选 项 ， 表 示 底数 ， 必 须 是 数字 。 

y: 必 选 项 ， 表 示 军 数 ， 必 须 是 数字 。 

例如 ， 获 取 2 的 6 次 寡 的 值 。 代 码 如 下 : 


<script type="text/javascript"> 
document.write(Math.pow(2,6)); 
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</script> 


运行 结果 : 64 
2. 正则 表达 式 简介 


正则 表达 式 描 述 了 一 种 字符 串 匹 配 模式 ， 即 用 户 可 使 用 一 系列 由 普通 字符 和 特殊 字符 构建 的 能 够 
明确 描述 文本 字符 串 的 匹配 模式 ， 检 查 一 个 字符 串 是 否 含有 某 种 子 字符 串 ， 将 匹配 的 子 字符 串 蔡 换 掉 ， 
或 者 从 某 个 字符 串 中 取出 符合 一 定 条 件 的 子 字符 串 等 。 

正则 表达 式 是 一 种 可 以 用 于 模式 匹配 和 蔡 换 的 强 有 力 的 工具 。 其 作用 如 下 

回 ”测试 字符 串 的 某 个 模式 。 例 如 ， 可 以 对 输入 的 字符 串 进 行 测试 ， 测 试 该 字符 串 是 否 存在 一 个 

电话 号 码 模式 或 一 个 信用 卡号 码 模式 。 这 称 为 数据 有 效 性 验证 。 

回 ” 蔡 换文 本 。 可 以 在 文档 中 使 用 一 个 正则 表达 式 来 标识 特定 文字 ， 然 后 将 其 全 部 删除 ， 或 者 蔡 

换 为 别 的 文字 。 

加 ”根据 模式 匹配 从 字符 串 中 提取 一 个 子 字符 串 。 例 如 ， 在 文本 或 输入 字段 中 查找 特定 的 文字 。 

在 JavaScript 中 ， 正 则 表达 式 是 由 RegExp 对 象 表示 的 ， 利 用 RegExp 对 象 可 完成 有 关 正 则 表达 式 
的 所 有 操作 和 功能 。 

(1) 创建 RegExp 对 象 

每 一 条 正则 表达 式 模式 对 应 一 个 RegExp 实例 。 有 两 种 方式 可 以 创建 RegExp 对 象 的 实例 : 一 种 是 
使 用 RegExp 构造 函数 创建 ， 另 一 种 是 采用 纯 文 本 格式 创建 。 

使 用 RegExp 构造 函数 创建 RegExp 对 象 的 语法 如 下 : 


new RegExp("pattern"[,"flags"]) 
使 用 纯 文 本 格式 创建 RegExp 对 象 的 语法 如 下 : 
/pattern/[flags] 


上 述 两 种 语法 中 , pattern 部 分 为 要 使 用 的 正则 表达 式 模式 文本 , 是 必需 的 。 在 第 一 种 方式 中 ,pattern 
部 分 以 JavaScript 字符 串 的 形式 存在 ， 需 要 使 用 双 引 号 或 单 引号 括 起 来 ; 在 第 二 种 方式 中 ， pattern 部 分 
嵌 套 在 两 个 “/” 之 间 ， 不 能 使 用 引号 。 

flags 部 分 设置 正则 表达 式 的 标志 信息 ， 是 可 选项 。 如 果 设 置 flags 部 分 ， 在 第 一 种 方式 中 ， 以 字符 
串 的 形式 存在 ;在 第 二 种 方式 中 ， 以 文本 的 形式 紧 接 在 最 后 一 个 “/” 字 符 之 后 。flags 可 以 是 以 下 标志 
字符 的 组 合 。 

回 g: 全 局 标志 。 如 果 设置 了 这 个 标志 ， 对 某 个 文本 执行 搜索 和 蔡 换 操作 时 ， 将 对 文本 中 所 有 匹 

配 的 部 分 起 作用 。 如 果 不 设 置 这 个 标志 ， 则 仅 搜索 和 蔡 换 最 早 匹 配 的 内 容 。 

回 i: 忽略 大 小 写 标 志 。 如 果 设 置 了 这 个 标志 ， 进 行 匹配 比较 时 ， 将 忽略 大 小 写 。 

(2) RegExp 对 象 的 test0 方 法 

该 方法 用 于 检查 被 查找 字符 串 中 是 否 存在 指定 的 模式 。 如 果 存 在 ， 则 返回 tue， 和 否则 就 返回 false。 
语法 如 下 : 

rgexp.test(str) 
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加 ”rgexp: 必 选 项 ， 包 含 正则 表达 式 模式 或 可 用 标志 的 正则 表达 式 对 象 。 
回 str: 必 选 项 ， 表 示 被 查找 的 字符 串 。 
例如 ， 判 断 字 符 串 “HTML-+CSS+JavaScript” 中 是 否 包含 子 字符 串 “JavaScript”， 代 码 如 下 : 
<script type="text/javascript"> 
var myString="HTML+CSS+JavaScript"; 
var myregex = new RegExp("JavaScript"); 
if (myregex.test(myString)}{ 
document.write(" 找 到 了 匹配 的 模式 "); 
Jelse{ 
document.write(" 未 找到 匹配 的 模式 "); 
, 
</script> 


运行 结果 : 找到 了 匹配 的 模式 
3. naturalWidth 和 naturalHeight 属性 


在 HIML5 中 新 增 了 naturalWidth 和 naturalHeight 两 个 属性 。 其 中 ，naturalWidth 属性 可 以 获取 图 
片 的 原始 宽度 ，naturalHeight 属性 可 以 获取 图 片 的 原始 高 度 。 
例如 ， 获 取 指 定 图 片 的 原始 宽度 和 高 度 ， 代 码 如 下 : 
<img id="myimg" src="face.png" width="200" height="200"> 
<script type="text/javascript"> 
window.onload = function () { 
var Oimg = document.getElementByld(“"myimg"); 
document.write(" 原 始 宽度 : "+Oimg.naturalWidth+"， 原 始 高 度 : "+Oimg.naturalHeight); 
} 
</script> 


运行 结果 : 原始 宽度 : 219， 原 始 高 度 : 231 
4. substr() 方 法 


String 对 象 的 substr0 方 法 可 从 字符 串 的 指定 位 置 开 始 ， 提 取 指 定 长 度 的 子 字符 串 。 语 法 如 下 
stringObject.substr(start,length) 


回 stringObject: String 对 象 名 或 字符 变量 名 。 

回 start: 必 选 参数 。 指 定 要 提取 的 字符 串 片断 的 开始 位 置 。 该 参数 可 以 是 负数 ， 如 果 是 负数 ， 则 
从 字符 串 的 尾部 开始 算 起 。 

回 length: 可 选 参数 。 用 于 指定 提取 的 子 字符 串 的 长 度 。 如 果 省 略 该 参数 ， 表 示 结 束 位 置 为 字符 
串 的 最 后 一 个 字符 。 

但 注意: 由 于 浏览 器 的 兼容 性 问题 ， 因 此 substr0 方 法 的 第 一 个 参数 不 建议 使 用 负数 。 

例如 ， 在 字符 串 “你 好 JavaScript” 中 ， 从 下 标 为 2 的 字符 开始 提取 到 字符 串 末 尾 。 代 码 如 下 
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<script type="text/javascript"> 
var str=" 你 好 JavaScript"; /定义 字符 串 
document.write(str.substr(2)); 

</script> 


运行 结果 : JavaScript 
例如 ， 在 字符 串 “ 你 好 JavaScript” 中 ， 从 下 标 为 2 的 字符 开始 提取 4 个 字符 。 代 码 如 下 : 


<script type="text/javascript"> 
var str=" 你 好 JavaScript"; /定义 字符 串 
document.write(str.substr(2,4)); 

</script> 


运行 结果 : Java 
5. canvas 元 素 的 toBlob() 方 法 
toBlob( 方 法 可 以 创造 Blob 对 象 ， 用 于 展示 canvas 上 的 图 片 ， 且 该 图 片 文件 可 以 被 缓存 或 保存 到 
本 地 。 如 不 特别 指明 ， 图 片 的 格式 默认 为 image 或 png， 分 辩 率 为 96dpi。 语 法 如 下 : 
canvas.toBlob(callback, type, encoderOptions); 


回 callback: 回调 函数 ， 可 获得 一 个 单独 的 Blob 对 象 参数 。 

回 type: String 类 型 ， 用 于 指定 图 片 格式 ， 默 认 格式 为 image 或 png。 

回 encoderOptions: Number 类 型 ， 取 值 范围 为 0 一 1。 当 请 求 图 片 格式 为 image 或 jpeg 时 ， 用 来 
指定 图 片 的 输出 质量 。 如 果 这 个 参数 的 值 不 在 指定 类 型 与 范围 之 内 ， 则 使 用 默认 值 ， 其 余 参 
数 将 被 忽略 。 


6. URL.createObjectURL() 方 法 


URL.createObjectURL0O 方 法 会 根据 传 入 的 参数 创建 一 个 指向 该 参数 对 象 的 URL. 这 个 URL 的 生命 
周期 仅 存在 于 它 被 创建 的 这 个 文档 中 。 这 个 新 的 URL 对 象 表示 指定 的 File 对 象 或 者 Blob 对 象 。 语 法 
如 下 : 

objectURL = URL.createObjectURL(object); 


参数 object 为 用 于 创建 URL 的 File 对 象 或 Blob 对 象 。 
7. URL.revokeObjectURL() 方 法 


URL.revokeObjectURL0O 方 法 用 来 释放 一 个 之 前 已 经 存在 的 、 通 过 调用 URL.Create ObjectURL0O 方 
法 创建 的 URL 对 象 。 语 法 如 下 : 
window.URL.revokeObjectURL(objectURL); 


参数 objectURL 表示 通过 调用 URL.createObjectURL0 方 法 产生 的 URL 对 象 。 
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例如 ， 通 过 canvas 图 像 复 制 一 张 png 格式 的 图 片 ， 并 显示 在 页 面 中 。 代 码 如 下 : 


<canvas id="canvas" width="200" height="200"></canvas> 
<script type="text/javascript"> 
var canvas = document.getElementByld("canvas"); 
var context = canvas.getContext('2d"); 
context.fillStyle = "ightgreen'; 
context.fillRect(50, 50,100, 100); 
canvas .toBlob(function(blob) { 
var newlmg = document.createElement("img"); 
var url = URL.createObjectURL(blob); 
newlmg.onload = function() { 
URL.revokeObjectURL(url); 
上 
newlmg.src = url; 
document.body.appendChild(newlmg); 
入 
</script> 


运行 结果 如 图 13.1 所 示 。 
createElement() 方 法 


createElement() 方 法 可 根据 指定 的 名 称 来 创建 一 个 HTML 元 素 。 语 法 如 下 : 
sElement=document.createElement(sName) 


回 sElement: 用 来 接收 该 方法 返回 的 一 个 对 象 。 
回 sName: 创建 的 元 素 名 称 。 


appendChild() 方 法 


appendChild0 方 法 可 向 节点 的 子 节点 列表 末尾 添加 一 个 新 的 子 节点 。 语 法 如 下 : 
obj.appendChild(node) 


参数 node 为 必 选 参数 ， 表 示 要 添加 的 节点 对 象 。 
例如 ， 将 创建 的 节点 添加 到 列表 中 ， 代 码 如 下 : 


<ul id="myList"> 
<li>HTML</li> 
<li>CcSss</li> 
</ul> 
<button onclick="myFunction()"> 添 加 列表 项 </button> 
<script type="text/javascript"> 
function myFunction(){ 
var node=document.createElement("li"); 
var textnode=document.createTextNode("JavaScript"); 
node.appendChild(textnode); 
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document.getElementByld("myList").appendChild(node); 


} 
</script> 
运行 程序 ， 添 加 节点 前 的 效果 如 图 13.2 所 示 ， 添 加 节点 后 的 效果 如 图 13.3 所 示 。 
。HTIL 
。HTIL » [CSS 


® CSS ® JavaScript 
[添加 列表 项 | 添加 列表 项 
图 13.1 复制 图 片 效 果 图 13.2 添加 节点 前 图 13.3 添加 节点 后 


实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 
1， 显示 上 传 文件 名 >oOoooeoee 


使 用 File 对 象 输出 上 传 文件 名 。 单 击 “选择 文件 ”按钮 ， 在 弹出 的 对 话 框 中 选择 要 上 传 的 文件 ; 
选择 文件 后 单 击 “ 打 开 ” 按 钮 ， 关 闭 对 话 框 ， 然 后 单 击 “ 显 示 文 件 名 称 ” 按 钮 ， 将 弹出 一 个 对 话 框 ， 
在 这 个 对 话 框 中 显示 上 传 文件 的 名 称 ， 实 现 效果 如 图 13.4 和 图 13.5 所 示 。 


选择 文件 ， 输 出 文件 名 


20170Ml81626 Mi 


图 13.4 选择 上 传 文件 
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选择 文件 ， 输 出 文件 名 


选择 文件 | 旦 示 文件 名 称 
此 网 页 显示 : 
多 所 迁 的 文件 各 为 : 《明天 会 更 好 》 歌 局 doc 
禁止 此 页 再 显示 对 话 框 . 


[w= | 


图 13.5 显示 上 传 文件 信息 
2. 单 图 缩 略 图 预览 POOOOOO 


实现 预览 指定 大 小 图 片 的 功能 。 单 击 “ 选 择 文件 ”按钮 ， 在 弹出 的 对 话 框 中 选择 要 上 传 的 图 片 文 
件 ， 如 图 13.6 所 示 ， 然 后 单 击 “ 打 开 ” 按 钮 并 关闭 对 话 框 ， 此 时 在 页 面 中 会 显示 指定 大 小 的 图 片 ， 如 
图 13.7 所 示 。 

(提示 : 应 用 readAsDataURL0O 方 法 预览 图 片 文件 ) 


[过 皇 文 件 | 未 远 持 任何 文件 


| 选择 文件 | 人物 1-08 png 


2-08.png 他 3-08 png 


图 13.6 选择 要 上 传 的 图 片 图 13.7 显示 缩 略 图 
3. 单 图 预览 并 输出 文件 信息 POOOOOO 


对 单个 上 传 图 片 进行 预览 ， 并 获取 上 传 图 片 信息 。 单 击 “ 选 择 文件 ”按钮 ， 在 弹出 的 对 话 框 中 选 
择 要 上 传 的 图 片 文件 ， 然 后 单 击 “ 打 开 ” 按 钮 并 关闭 对 话 框 ， 页 面 中 将 输出 图 片 以 及 图 片 的 大 小 、 类 
型 、 尺 寸 等 信息 ， 实 现 效果 如 图 13.8 和 图 13.9 所 示 。 

(提示 : 应 用 readAsDataURL0O 方 法 预览 图 片 文件 ) 


4. 编辑 照片 墙 


在 有 些 博客 类 网 站 中 提供 了 照片 墙 功 能 ， 
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获取 上 传 图 片 信息 


@ Ff 
GO we HTML+CSS+JavaS— ， 图 片 资源 ， -14 | aa 


把 织 ”新 建文 件 去 习 ~ © 


2016010505364 b5635defcad0j 
7.31909.png 


M3jpg 
文件 SN): ht 3jpg ”| 所 文件 


[ol be 


图 13.8 选择 上 传 图 片 


获取 上 传 图 片 信息 


过 本 立体 ] h_) jn 


13.9 获取 图 片 信息 


POOOOOO 


其 中 可 以 显示 用 户 已 经 上 传 的 照片 。 编 写 程序 ， 实 现 预 


览 用 户 上 传 照片 的 功能 。 单 击 “ 选 择 文件 ”按钮 ， 选 择 要 上 传 的 照片 。 然 后 单 击 “ 打 开 ” 按 钮 关闭 对 


话 框 ， 单 击 “ 我 选 好 了 ”按钮 ， 用 户 选择 的 照片 将 显示 在 照片 墙 中 。 单 


还 可 以 将 其 删除 。 实 现 效 果 如 图 13.10 和 图 13.11 所 示 。 
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(提示 : 应 用 readAsDataURL(O 方 法 预览 图 片 文件 ) 


HE “62jpg" -9jpar “10jpg “lejp ~ 


Le) Ew 


图 13.10 选择 照片 


图 13.11 照片 墙 效果 


5. 文本 的 上 传 预览 >Ooo@oo@oe@ 


实现 文本 的 上 传 预览 功能 。 单 击 “ 选 择 文件 ”按钮 ， 选 择 要 浏览 的 文本 文件 ， 然 后 单 击 “ 打 开 ?” 
按钮 关闭 对 话 框 。 单 击 “ 查 看 文件 ”按钮 ， 弹 出 确认 对 话 框 ， 单 击 “ 确 定 ”按钮 ， 文 本 文件 的 内 容 将 
在 页 面 中 显示 出 来 。 实 现 效果 如 图 13.12 和 图 13.13 所 示 。 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


(提示 : 应 用 readAsDataURL0O 方 法 预览 图 片 文件 ， 应 用 readAsText(0) 方 法 读 取 文本 文件 ) 


洗 树 文人 和 文本 


Ga co， Ez 四 
组 织 ” 。 新 建文 件 实 二 
各 emBC “5 和 舍 改 日期 二 
oD ee 2019/912 1621 。 文 # 赤 

Bimg 2019/9/121621 ”文大 | 


3 让 地 到 三 (有 而 indexchtml 2018/7/27 14:46 。 360se| 中 


已 


图 13.12 查看 文件 


: 看 到 了 吗 ? 对 面 那 美文 - 


: 怎么 呢 ? 
: 我 特别 喜欢 这 样 有 气质 的 美女 ， 怎 么 样 ， 帮 嘛 一 下 ， 把 她 的 电话 并 到 手 ， 我 给 你 二 。 


图 13.13 文件 上 传 后 效果 
6. 应 用 事件 属性 拖 放 图 片 到 指定 区 域 PooOOOOO 


应 用 事件 属性 ， 将 页 面 中 的 元 素 拖 放 到 指定 区 域 。 页 面 中 有 一 个 矩形 区 域 ， 和 矩形 区 域 的 右 侧 有 一 
张 图 片 。 按 住 鼠 标 左 键 可 以 拖 动 图 片 , 并 且 该 图 片 只 能 被 拖 放 到 左 侧 的 矩形 区 域 中 , 实现 效果 如 图 13.14 
和 图 13.15 所 示 。 

(提示 : 在 ondrop 事件 的 处 理 函 数 中 应 用 appendChild0 方 法 ) 


人 
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请 把 图 片 拖 放 到 矩形 中 : 
(TR 
明日 科技 明日 简 技 
图 13.14 拖 动 图 片 前 图 13.15 ” 拖 动 图 片 后 
7. 应 用 事件 监听 器 帮 小 鸟 回 家 >Oog@ooeooe 


编写 程序 ， 模 拟 帮 小 鸟 回 家 的 游戏 效果 。 拖 动 左上 角 的 小 鸟 图 片 时 ， 出 现 “ 小 鸟 正在 回 家 ...” 文 
字 。 将 其 拖 动 到 右 下 方 房屋 中 时 ， 出 现 “ 小 鸟 已 经 回 家 ! ”文字 ， 效 果 如 图 13.16 和 图 13.17 所 示 。 


图 和 
自 给 
图 13.16 初始 效果 图 13.17 小 鸟 已 回 家 
8. 将 文件 拖 动 到 指定 区 域 预览 PooOOOOO 


编写 程序 ， 实 现 文件 拖 搜 到 指定 区 域 后 自动 预览 文件 的 功能 。 在 页 面 中 显示 一 个 文件 预览 区 域 ， 
当 把 其 他 窗口 中 的 图 片 文件 或 TXT 文本 文件 拖 搜 到 该 区 域 时 ,会 自动 打开 该 文件 进行 预览 。 实 现 效 果 
如 图 13.18 和 图 13.19 所 示 。 

(提示 : 为 目标 元 素 添加 dragover 事件 和 drop 事件 ) 


将 文件 拖拉 到 此 区 域 实现 文件 预览 
文 作 预 贤 区 ， 仅 限 图 片 和 txt 文 伯 


图 49jpg ”aE 损 定 9 若 
JPGXe 


图 13.18 选择 文件 
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将 文件 拖 搜 到 此 区 域 实现 文件 预览 
文件 预览 区 ， 仅 限 图 片 和 bt 文件 


图 13.19 将 文件 拖 动 到 指定 区 域 


训练 二 : 实战 能 力 强化 训练 
9. 将 商品 拖 至 购物 车 >Oooooeoe 


编写 程序 ， 实 现 将 图 书 商品 拖 入 购物 车 的 效果 。 在 页 面 中 输出 若干 图 书 商品 的 图 片 ， 应 用 鼠标 将 
图 书 直 接 拖 放 到 购物 车 中 ， 此 时 图 书 的 书 名 、 定 价 、 数 量 和 总 价 等 信息 将 显示 在 下 面 的 列表 中 ， 效 果 
如 图 13.20 和 图 13.21 所 示 。 

(提示 : 在 dragstart 事件 中 应 用 setData() 方 法 为 元 素 添加 数据 ， 在 drop 事件 中 应 用 getData0 方 法 
获取 数据 ) 


区 


ad 


书 名 
HTML5+CSS3 精 志 坊 得 200 例 
二 基础 学 JavaScript 
要 基础 宇 HTML5+CSS3 
JavaScript 精 才 纺 但 200 例 


图 13.20 购物 车 为 空 图 13.21 将 图 书 拖 至 购物 车 
10. 随意 拖 动 广告 图 POOOOOO 


编写 程序 ， 实 现 页 面 中 广告 可 随意 拖 动 的 效果 。 在 页 面 左上 角 显示 一 张 广 告 图 片 ， 按 住 鼠标 左 键 ， 
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可 将 广告 图 片 拖 动 到 页 面 中 的 任何 位 置 ， 如 图 13.22 和 图 13.23 所 示 。 
(提示 : 应 用 和 鼠标 事件 中 的 onmousedown、onmousemove 和 onmouseup 事件 ) 


入 


全 = 


图 13.22 ”随意 拖 动 广告 (1) 图 13.23 ”随意 拖 动 广告 (2) 
11. 下 载 canvas 图 像 >OOoOG@Ooo@ 
编写 程序 ， 实 现下 载 canvas 图 像 的 功能 。 在 页 面 中 输出 一 张 canvas 图 像 ， 单 击 “ 下 载 ” 按 钮 ， 该 


图 像 会 被 下 载 到 本 地 计算 机 中 ， 效 果 如 图 13.24 所 示 。 
(提示 : 设置 <a> 标 签 的 download 属性 ) 


全 


下 载 


园 housepng 


图 13.24 下 载 canvas 图 像 
12. 预览 多 个 上 传 文件 信息 >Oooooo@ 
编写 程序 ， 对 多 个 上 传 图 片 进行 预览 ， 并 获取 上 传 图 片 的 名 称 、 大 小 信息 。 单 击 “ 选 择 文件 ” 按 


钮 ， 选 择 要 上 传 的 多 个 图 片 文件 ， 然 后 单 击 “ 打 开 ” 按 钮 并 关闭 对 话 框 后 ， 会 在 页 面 中 输出 图 片 的 缩 
略图 以 及 图 片 的 名 称 、 大 小 等 信息 ， 如 图 13.25 和 图 13.26 所 示 。 
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ES 


#1 


OO E77 


新 建文 件 夫 


2 和 
了 F 
ee | 


1 下 
局 SEE， 


(Nk "16jpg' 9jpg' “10jpe" 一 
#0O) 3 
图 13.25 选择 多 个 上 传 图 片 图 13.26 预览 多 个 上 传 图 片 
13. 图 片 在 两 个 容器 内 随意 拖 动 POOQOOOO 


编写 程序 ， 实 现 图 片 在 两 个 容器 内 的 随意 拖 动 。 在 页 面 左 侧 有 一 张 图 片 ， 应 用 鼠标 可 以 将 该 图 片 
拖 动 到 右 侧 任意 容器 当中 ， 如 图 13.27 和 图 13.28 所 示 。 
(提示 : 在 ondrop 事件 的 处 理 函 数 中 应 用 appendChild0 方 法 ) 


图 13.27 图 片 位 于 左 侧 图 13.28 图 片 位 于 右 侧 
14. 将 图 片 拖 放 到 回收 站 >Ooo@oo@oe@ 


编写 程序 ， 模 拟 计 算 机 中 将 文件 拖 放 到 回收 站 的 效果 。 在 页 面 中 有 几 个 图 片 文件 ， 用 鼠标 将 其 拖 
电 到 右 侧 回收 站 〈 垃 圾 桶 ) 中 ， 即 可 删除 图 片 ， 效 果 如 图 13.29 和 图 13.30 所 示 。 
(提示 : 在 ondrop 事件 的 处 理 函 数 中 应 用 removeChild0 方 法 ) 


人 i 
图 13.29 将 图 片 拖 动 到 回收 站 中 图 13.30 ”图片 已 被 删除 
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本 章 训练 任务 对 应 核心 技术 分 册 第 14 章 “JavaScript 对 象 编程 ”部 分 。 
加 ”重点 练习 内 容 : 
.Window 窗 口 对 象 的 应 用 。 
. 文档 前 景色 和 背景 色 的 设置 。 
。 使 用 JavaScript 操 作 表 单 。 
. DOM 节 点 属性 的 使 用 。 
.对 DOM 节 点 的 操作 。 


wm 上 wm 一 


应 用 技能 拓展 学 习 


1. setlnterval() 方 法 和 clearlnterval() 方 法 


(1) setInterval0 方 法 
setInterval0 方 法 是 Window 对 象 中 的 方法 ， 可 按照 指定 周期 (以 毫秒 计 ) 调用 函数 或 计算 表达 式 。 
语法 格式 如 下 : 
setlnterval( 要 执行 的 代码 或 函数 ， 等 待 的 毫秒 数 ) 
例如 ， 每 隔 两 秒 钟 执行 一 次 JavaScript 代码 ， 在 页 面 中 弹出 一 个 对 话 框 。 代 码 如 下 : 


<script type="text/javascript"> 
setlnterval("alert('Hello JS");", 2000); 
</script> 


例如 ， 每 隔 一 秒 钟 执行 一 次 函数 ， 实 时 显示 当前 时 间 。 代 码 如 下 : 


<p id="demo"></p> 
<script type="text/javascript"> 
var myVar = setlnterval(function(){ myTime() }, 1000); 
function myTime() { 
var now = new Date(); 
vartime = now.toLocaleTimeString(); 
document.getElementByld("demo").innerHTML = time; 
</script> 
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运行 结果 : 上 午 10:17:56 
(2) clearInterval0 方 法 
clearInterval0 方 法 可 取消 由 setInterval0 方 法 设 定 的 定时 执行 操作 。 该 方法 的 参数 必须 是 由 
setInterval(0 方 法 返回 的 ID 值 。 语 法 格式 如 下 : 
clearlnterval(id_of_setinterval) 


参数 id_of setinterval 为 调用 setInterval0 函 数 时 所 获得 的 返回 值 。 
例如 ， 单 击 “ 停 止 ” 按 钮 时 ， 取 消 实时 显示 当前 时 间 的 操作 。 代 码 如 下 : 


<p id="demo"></p> 
<button onclick="stop()"> 停 止 </button> 
<script type="text/javascript"> 
var timerlD = setlnterval(function(){ myTime() }, 1000); 
function myTime() { 
var now = new Date(); 
vartime = now.toLocaleTimeString(); 
document.getElementByld("demo").innerHTML = time; 


} 
function stop() { 
clearlnterval(timerlD); 


} 
</script> 
2. classList 属性 


classList 属性 可 以 获取 应 用 于 指定 元 素 的 类 名 集合 。 该 属性 用 于 在 元 素 中 添加 、 移 除 或 切换 CSS 
类 。 语 法 如 下 : 
element.classList 


参数 element 为 要 操作 的 元 素 。 
例如 ， 输 出 id 属性 值 为 demo 的 div 元 素 的 类 名 ， 代 码 如 下 : 
<div id="demo" class="a b"></div> 
<script type="text/javascript"> 
var oDiv = document.getElementByld("demo"); 
document.write(oDiv.classList); 
</script> 


运行 结果 : ab 
classList 属性 是 只 读 属 性 ， 可 以 使 用 add0 和 remove0 方 法 修改 该 属性 。 
(1) add0 方 法 
add0 方 法 用 于 在 元 素 中 添加 一 个 或 多 个 类 名 。 如 果 指 定 的 类 名 已 存在 ， 则 不 再 添加 。 语 法 格式 
如 下 : 


element.classList.add(class1, class2, ...) 
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参数 class1、class2 为 要 添加 的 类 名 。 
例如 ， 为 id 属性 值 为 demo 的 div 元 素 添加 两 个 CSS 类 c 和 d， 并 输出 添加 后 元 素 的 类 名 。 代 码 
如 下 : 

<div id="demo" class="a b"></div> 

<script type="text/javascript"> 
var oDiv = document.getElementByld("demo"); 
oDiv.classList.add("c","d"); 
document.write(oDiv.classList); 

</script> 

运行 结果 : abcd 

(2) remove0 方 法 
remove0) 方 法 用 于 移 除 元 素 中 的 一 个 或 多 个 类 名 。 语 法 格式 如 下 : 


element.classList.remove(class1, class2, ...) 


参数 class1、class2 为 要 移 除 的 类 名 。 
例如 ， 为 id 属性 值 为 demo 的 div 元 素 移 除 3 个 CSS 类 b、c 和 d， 并 输出 移 除 后 元 素 的 类 名 。 代 
码 如 下 : 

<div id="demo" class="a b c d"></div> 

<script type="text/javascript"> 
var oDiv = document.getElementByld("demo"); 
oDiv.classList.remove("b","c","d"); 
document.write(oDiv.classList); 

</script> 

运行 结果 : a 

(3) toggle() 方 法 
toggle0 方 法 用 于 在 元 素 中 切换 类 名 。 语 法 格式 如 下 : 


element.classList.toggle(class, truelfalse) 


class: 必 选 参数 ， 表 示 要 在 元 素 中 移 除 的 类 名 。 如 果 该 类 名 不 存在 ， 则 在 元 素 中 添加 类 名 。 
回 truelfalse: 可 选 参 数 ， 是 一 个 布尔 值 ， 用 于 设置 元 素 是 否 强 制 添加 或 移 除 类 (不管 该 类 名 是 否 
存在 )。 
例如 ,在 id 属性 值 为 show 的 div 元 素 中 切换 类 名 ， 单 击 该 div 元 素 时 通过 切换 类 名 实现 元 素 样式 
的 切换 。 代 码 如 下 : 


<style type="text/css"> 
.Oldstyle{ 
width: 200px; 
height: 50px:; 
line-height: 50px; 
background-color: lightgreen; 
text-align: center; 
color: red; 
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cursor pointer 
} 
.newstyle { 
width: 200px; 
height: 50px; 
line-height: 50px:; 
background-color: blue; 
text-align: center; 
color: white; 
cursor: pointer; 
} 
</style> 
<div id="show" class="oldstyle"> 是 金子 总 会 发 光 </div> 
<script type="text/javascript"> 
document.getElementByld("show").onclick = function (}{ 
this.classList.toggle("newstyle"); 
</script> 


运行 结果 如 图 14.1 和 图 14.2 所 示 。 


是 爹 了 总 合 兆 光 是 金 总 人 光 
图 14.1 样式 效果 (1) 图 14.2 样式 效果 (2) 


3，style 对 象 的 几 个 属性 


(1) backgroundColor 属性 
backgroundColor 属性 可 以 设置 或 返回 元 素 的 背景 颜色 。 
设置 backgroundColor 属性 的 语法 格式 如 下 : 


element.style.backgroundColor="colorlinheritltransparent" 

加 color: 定义 背景 颜色 。 

回 inherit: 表示 背景 颜色 从 父 元 素 继承 。 

回 transparent: 默认 值 。 表 示 背 景 颜 色 是 透明 的 。 

返回 backgroundColor 属性 的 语法 格式 如 下 : 

element.style.backgroundColor 

例如 ， 单 击 “ 设 置 背景 颜色 ”按钮 时 ， 设 置 页 面 背景 颜色 为 绿色 ， 代 码 如 下 : 


<script type="text/javascript"> 
function setBg(){ 
document.body.style.backgroundColor="green"; 


} 
</script> 
<button type="button" onclick="setBg()"> 设 置 背 景 颜色 </button> 
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(2) cursor 属性 
cursor 属性 可 以 设置 或 返回 鼠标 指针 显示 的 光标 类 型 。 
设置 cursor 属性 的 语法 格式 如 下 : 
Object.style.cursor="value" 


value 的 常用 值 及 其 描述 如 表 14.1 所 示 。 
表 14.1 value 的 常用 值 及 其 描述 


值 光标 描述 


auto | 默认 光标 ， 即 浏览 器 设置 的 光标 《通常 是 一 个 箭头 ) 
crosshair | 十 字 线 
default | 默认 光标 (通常 是 一 个 箭头 ) 


交叉 箭头 ， 指 示 某 对 象 可 被 移动 


指示 链接 的 指针 (通常 是 一 只 手 ) 
程序 正 忙 〈 通 常 是 一 只 表 或 沙漏 ? 


返回 cursor 属性 的 语法 格式 如 下 : 


Object.style.cursor 
例如 ， 当 鼠标 指向 文本 时 设置 指针 光标 类 型 为 手 型 ， 代 码 如 下 : 
<p id="demo"> 路 漫漫 其 修 远 兮 </p> 
<script type="text/javascript"> 
document.getElementByld("demo").style.cursor="pointer"; 
</script> 
(3) height 属性 
height 属性 可 以 设置 或 返回 元 素 的 高 度 。 
设置 height 属性 的 语法 格式 如 下 : 
Object.style.height="autollength|%linherit" 


auto: 默认 。 浏 览 器 设置 的 高 度 。 

length: 使 用 px、cm 等 单位 定义 高 度 。 

%: 定义 高 度 为 父 元 素 的 百分比 。 

inherit: height 属性 的 值 从 父 元 素 继承 。 

可 height 属性 的 语法 格式 如 下 : 

Object.style.height 

例如 ， 当 单 击 “ 改 变 高 度 ” 按 钮 时 设置 按钮 的 高 度 为 60 像素 ， 代 码 如 下 : 


<script type="text/javascript"> 
function changeHeight(){ 
document.getElementByld("but").style.height="60px"; 


岚 加 加 回回 
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| 
</script> 
<input type="button" id="but" onclick="changeHeight()" value=" 改 变 高 度 "> 


运行 结果 如 图 14.3 和 图 14.4 所 示 。 


图 14.3 ”实现 效果 图 14.4 实现 效果 
(4) marginTop 属性 
marginTop 属性 可 以 设置 或 返回 元 素 的 上 外 边 距 。 
设置 marginTop 属性 的 语法 格式 如 下 : 
Object.style.marginTop="%llengthlautolinherit" 


%: 定义 基于 父 元 素 宽度 的 百分比 上 外 边 距 。 

length: 使 用 px、cm 等 单位 定义 上 外 边 距 的 宽度 。 
auto: 浏览 器 设 定 的 上 外 边 距 。 

inherit: 上 外 边 距 从 父 元 素 继承 。 

返回 marginTop 属性 的 语法 格式 如 下 : 

Object.style.marginTop 

例如 ， 设 置 id 为 show 的 元 素 的 上 外 边 距 为 50px， 代 码 如 下 : 


<script type="text/javascript"> 
document.getElementByld("show").style.paddingTop="50px"; 
</script> 


回回 罗 加 


(5) backgroundPosition 属性 
backgroundPosition 属性 可 以 设置 或 返回 元 素 背景 图 像 的 位 置 。 
设置 backgroundPosition 属性 的 语法 格式 如 下 : 
Object.style.backgroundPosition="position” 
参数 position 的 可 取 值 如 表 14.2 所 示 。 
表 14.2 参数 position 的 可 取 值 
值 描述 


top left、top center、top right、 
center left、 center center、 
center Tight 、bottom left、 
bottom center、bottom right 


如 果 仅 指定 一 个 关键 字 ， 则 另 一 个 值 默认 为 center 


x 值 表示 水 平 位 置 ，y 值 表示 垂直 位 置 。 左 上 和 角 是 0% 0%。 右 下 角 是 100% 100%。 如 


的 果 仅 指定 一 个 值 ， 则 另 一 个 值 默认 为 50% 


170 


第 14 章 ”JavaScript 对象 编程 


续 表 
值 描述 
x 值 表示 水 平 位 置 ，y 值 表示 垂直 位 置 。 左 上 角 是 0 0。 单 位 可 以 是 像素 (0px 0px) 或 
xpos ypos 任何 其 他 的 CSS 单位 。 如 果 仅 指定 一 个 值 , 则 另 一 个 值 默认 为 50%。 还 可 以 混合 使 用 % 
和 单位 
inherit 背景 位 置 属性 的 设置 从 父 元 素 继承 
返回 backgroundPosition 属性 的 语法 格式 如 下 : 
Object.style.backgroundPosition 
例如 ， 设 置 id 属性 值 为 show 的 div 元 素 的 背景 图 像 位 于 元 素 右 下角 的 位 置 ， 代 码 如 下 : 


<div id="show"></div> 

<script type="text/javascript"> 
var myDiv = document.getElementByld("show"); 
myDiv.style.backgroundPosition="bottom right"; 

</script> 

(6) backgroundImage 属性 

backgroundImage 属性 可 以 设置 或 返回 元 素 的 背景 图 像 。 

设置 backgroundImage 属性 的 语法 格式 如 下 : 

Object.style.backgroundlmage="url('URL')|Inonelinherit" 


回 urCURL): 定义 图 像 文件 的 位 置 。 

回 none: 默认 值 ， 表 示 没 有 背景 图 像 。 

回 inherit， 该 属性 的 设置 从 父 元 素 继承 。 
返回 backgroundImage 属性 的 语法 格式 如 下 : 
Object.style.backgroundlImage 

例如 ， 为 页 面 设置 一 个 背景 图 像 ， 代 码 如 下 : 


<script type="text/javascript"> 
document.body.style.backgroundlImage="url('face.png")"; 
</script> 


4. 按钮 的 disabled 属性 


在 表单 元 素 的 按钮 中 ，disabled 属性 用 于 返回 或 设置 按钮 是 否 被 禁用 。 该 属性 值 为 tue 时 ， 禁 用 按 
钮 ; 该 属性 值 为 false 时 ， 启 用 按钮 。 
例如 ， 设 置 “ 添 加 ”按钮 禁用 ， 代 码 如 下 : 


<button type="button" id="add"> 添 加 </button> 

<script type="text/javascript"> 
var myButton = document.getElementByld("add"); 
myButton.disabled = true; 

</script> 
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5. 下 拉 菜 单 的 selectedlndex 属性 


在 表单 元 素 的 下 拉 菜 单 中 , selectedIndex 属性 用 于 返回 或 设置 下 拉 菜 单 中 ,当前 选中 选项 在 所 有 下 
拉 菜 单 选项 中 的 索引 。 该 索引 从 0 开始 ， 第 一 个 选项 的 索引 为 0， 第 二 个 选项 的 索引 为 1， 以 此 类 推 。 
例如 ， 当 改变 下 拉 菜 单 的 选项 时 ， 输 出 当前 选中 选项 的 索引 ， 代 码 如 下 : 


<select id="type"> 
<option selected> 动 作 电影 </option> 
<option> 喜 剧 电影 </option> 
<option> 科 幻 电影 </option> 
</select> 
<script type="text/javascript"> 
var myType = document.getElementByld("type"); 
myType.onchange = function(){ 
alert(myType.selectedlndex); 
》 
</script> 


6. clientHeight 属性 


clientHeight 属性 用 于 返回 元 素 可 见 区 域 的 高 度 ,以 像素 计 。 包括 元 素 的 高 度 和 上 下 内 边 距 的 高 度 ， 
但 不 包括 上 下 边框 的 高 度 。 
例如 ， 为 id 属性 值 为 show 的 div 元 素 设置 样式 ， 并 输出 该 元 素 可 见 区 域 的 高 度 ， 代 码 如 下 : 
<div id="show" style="width: 100px;height: 50px;padding: 5px;border 1px solid #000000;"></div> 
<script type="text/javascript"> 
alert(document.getElementByld("show").clientHeight); 
</script> 


运行 结果 : 60 
7. setAttribute() 和 getAttribute() 方 法 


(1) setAttribute0 方 法 
setAttribute0 方 法 用 于 创建 或 改变 某 个 新 属性 。 如 果 指 定 属性 已 存在 ， 则 会 设置 该 属性 值 。 语 法 格 
式 如 下 : 
element.setAttribute(attributename,attributevalue) 


回 attributename: 必 选 参数 ， 要 添加 的 属性 名 称 。 
回 attributevalue: 必 选 参数 ， 要 添加 的 属性 值 。 

(2) getAttribute0 方 法 
getAttribute0 方 法 用 于 通过 属性 名 称 获取 属性 的 值 。 语 法 格式 如 下 : 


element.getAttribute(attributename) 
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参数 attributename 为 必 先 参数， 表示 要 获取 属性 值 的 属性 名 称 。 
例如 ， 为 id 属性 值 为 show 的 div 元 素 设置 name 属性 ， 并 输出 该 属性 的 值 ， 代 码 如 下 : 


<div id="show"></div> 

<script type="text/javascript"> 
var myDiv = document.getElementByld("show"); 
myDiv.setAttribute("name","music"); 
alert(myDiv.getAttribute("name")); 

</script> 


运行 结果 : music 
. 数组 的 splice() 方 法 
splice0 方 法 可 以 删除 数组 中 指定 位 置 的 元 素 ， 还 可 向 数组 的 指定 位 置 添加 新 元 素 。 语 法 格式 如 下 : 


arrayObject.splice(start,length,element1,element2,...) 


回 arrayObject: 必 选 项 ， 数 组 名 称 。 

回 start: 必 选 项 ， 指 定 要 删除 的 数组 元 素 的 开始 位 置 ， 即 数组 的 下 标 。 

回 length: 可 选项 ， 指 定 要 删除 的 数组 元 素 的 个 数 。 如 果 未 设置 该 参数 ， 则 删除 从 start 开始 到 原 
数组 末尾 的 所 有 元 素 。 

element: 可 选项 ， 要 添加 到 数组 的 新 元 素 。 

例如 ， 在 splice0 方 法 中 应 用 不 同 参数 ， 对 相同 数组 中 的 元 素 进行 删除 操作 。 代 码 如 下 : 


<script type="text/javascript"> 
Var arr1 = new Array("a","b","c","d"); 
arr1.splice(1); 
document.write(arr1+"<br>"); 
Var arr2 = new Array("a","b","c","d"); 
arr2.splice(1,2); 
document.write(arr2+"<br>"); 
Var arr3 = new Array("a","b","c","d"); 
arr3.splice(1,2,"e","f"); 
document.write(arr3+"<br>"); 
Var arr4 = new Array("a","b","c","d"); 
arr4.splice(1,0,"e","f"); 
document.write(arr4); 

</script> 


运行 结果 : a 
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9. globalCompositeOperation 属性 


globalCompositeOperation 是 canvas 中 的 属性 ， 用 于 设置 或 返回 如 何 将 一 个 源 (新 的 ) 图 像 绘 制 到 
目标 (已 有 的 ) 的 图 像 上 。 语 法 格式 如 下 : 


context.globalCompositeOperation=value; 
value 的 可 用 值 及 其 描述 如 表 14.3 所 示 。 


表 14.3 value 的 可 用 值 及 其 描述 


值 描述 
soUrce-Over 默认 值 ， 在 目标 图 像 上 显示 源 图 像 
source-atop 在 目标 图 像 项 部 显示 源 图 像 。 源 图 像 位 于 目标 图 像 之 外 的 部 分 是 不 可 见 的 
source-in 在 目标 图 像 中 显示 源 图 像 。 只 有 目标 图 像 之 内 的 源 图 像 部 分 会 显示 ， 目 标 图 像 是 透明 的 
source-out 在 目标 图 像 之 外 显示 源 图 像 。 只 有 目标 图 像 之 外 的 源 图 像 部 分 会 显示 ， 目 标 图 像 是 透明 的 
destination-over 在 源 图 像 上 显示 目标 图 像 
destination-atop 在 源 图 像 项 部 显示 目标 图 像 。 目 标 图 像 位 于 源 图 像 之 外 的 部 分 是 不 可 见 的 


destination-in 
destination-out 


在 源 图 像 中 显示 目标 图 像 。 只 有 源 图 像 之 内 的 目标 图 像 部 分 会 被 显示 ， 源 图 像 是 透明 的 


在 源 图 像 之 外 显示 目标 图 像 。 只 有 源 图 像 之 外 的 目标 图 像 部 分 会 被 显示 ， 源 图 像 是 透明 的 
lighter 显示 源 图 像 及 目标 图 像 
copy 显示 源 图 像 ， 忽 略 目标 图 像 


XOr 


使 用 异 或 操作 对 源 图 像 与 目标 图 像 进行 组 合 


例如 ， 应 用 globalCompositeOperation 属性 绘制 图 形 。 代 码 如 下 : 


<canvas id="myCanvas" width="300" height="150" style="border:1px solid #CCCCCC;"></canvas> 
<script type="text/javascript"> 

var canvas=document.getElementByld("myCanvas"); 

Var ctx=canvas.getContext("2d"); 

ctx.fillStyle="red"; 

ctx.filRect(60,20,150,60); 

ctx.fillStyle="blue"; 

ctx.globalCompositeOperation="destination-out"; 

ctx.fillRect(90,50,150,60):; 


</script> 


实现 效果 如 图 14.5 所 示 。 
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图 14.5 绘制 图 形 
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实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 
1. 删除 订单 信息 >Ooooooe@ 


购物 网 站 的 管理 员 通 常 都 具备 删除 订单 的 操作 权限 。 编 写 程序 ， 在 订单 信息 页 面 中 单 击 欲 删除 订 
单 后 面 的 “删除 ” 超 链接 ， 将 弹出 “确定 要 删除 吗 ? ”提示 对 话 框 ; 单 击 “ 确 定 ”按钮 ， 将 执行 删除 
操作 。 实 现 效果 如 图 14.6 和 图 14.7 所 示 。 

(提示 : 应 用 removeChild0 方 法 删除 元 素 ) 


订单 号 商品 名 称 数量 单价 ”消费 金额 下 单 日 期 操作 


13 全 自动 洗衣 机 1 1699 1699 2019-08-10 10:19 。 删除 
14 零 基 础 学 JavaScript 2 50 100 2019-08-12 13:16 删除 
15 数码 相机 1 2599 2599 2019-08-16 15:16 全 作 
= x 
此 网 页 显示 : 
确定 要 删除 号 了 
禁止 此 页 再 显示 对 活 框 。 


14.6 ”删除 订单 提示 


订单 号 商品 名 称 数量 ”单价 ”消费 金额 下 单 日 期 操作 


13 全 自动 洗衣 机 1 1699 1699 2019-08-10 10:19 删除 


14 零 基 础 学 JavaScript 2 50 100 2019-08-12 13:16 删除 


图 14.7 删除 订单 后 
2. 奥运 知识 问答 POOOOOO 


在 提示 对 话 框 中 设计 一 个 选择 题 ， 询问 用 户 2012 年 奥运 会 在 哪个 城市 举办 。 用 户 输入 答案 并 单 击 
“确定 ”按钮 后 ， 在 页 面 中 会 给 出 答题 结果 ， 如 图 14.8 和 图 14.9 所 示 。 
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% 


a 证 环 正确 ! 伦敦 是 2012 年 奥运 会 的 举办 城市 
图 14.8 答题 图 14.9 答题 结果 
3. 单 击 火箭 图 片 返回 顶部 >Ooo@oooe 


实现 单 击 图 片 快速 返回 页 面 顶 部 功能 。 向 下 拖 动 页 面 右 侧 的 滚动 条 ， 会 看 到 一 张 火 箭 图 片 ， 单 击 
该 图 片 ， 页 面 会 快速 返回 项 部， 效果 如 图 14.10 和 图 14.11 所 示 。 
(提示 : 应 用 scrollTo0 方 法 滚动 窗口 中 的 文档 ) 


图 14.10 单 击 火箭 前 图 14.11 单 击 火箭 后 
4. 切换 注册 按钮 的 状态 POOOOOO 


注册 网 站 时 ， 只 有 同意 网 站 的 注册 协议 ， 才 能 进一步 实现 注册 。 当 用 户 未 选中 注册 协议 复 选 框 时 ， 
“注册 ”按钮 为 禁用 状态 ， 当 用 户 选中 注册 协议 复 选 框 时 ，“ 注 册 ” 按 钮 为 启用 状态 。 编 程 实现 这 一 
功能 ， 效 果 如 图 14.12 和 图 14.13 所 示 。 

(提示 : 应 用 按钮 的 disabled 属性 ) 
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注册 注册 
用 户 名 : 用 户 名 
密 码 : 密 码 : | 一 
确认 密码 :… 确认 密码 : 
阅读 并 同意 < 入 回 阅读 并 同意 
EE 
图 14.12 “注册 ”按钮 不 可 用 图 14.13 “注册 ”按钮 可 用 
5， 在 列表 中 选择 头像 >oooeeoee 


实现 选择 用 户头 像 的 功能 。 在 “请 选择 头像 ”下 拉 列 表 框 中 选择 某 个 头像 后 ， 上 方 将 显示 该 项 所 
代表 的 头像 。 用 户 也 可 以 将 该 下 拉 列 表 框 选中 ， 然 后 按 上 、 下 方向 键 选择 想 要 的 头像 。 实 现 效 果 如 
图 14.14 所 示 。 


14.14 ”列表 中 选择 头像 
6. 使 用 进度 条 模拟 安装 过 程 POOOOOO 


编写 程序 ， 模 拟 软件 安装 过 程 中 的 进度 条 效果 。 当 页 面 加 载 时 ， 可 以 看 到 进度 条 的 完成 情况 和 相 
应 的 百分比 ， 当 进度 条 进行 到 100% 时 停止 移动 ， 实 现 效果 如 图 14.15 和 图 14.16 所 示 。 
(提示 : 在 setInterval() 方 法 中 设置 进度 条 元 素 的 宽度 ) 


正在 安装 ， 请 向 候 .… 安装 完成 
| Es 
32% 100% 


图 14.15 安装 中 图 14.16 ”安装 完成 
7. 实现 秒表 计时 功能 >Ooo@oooe@ 


编写 程序 ， 设 计 一 个 秒表 计时 的 功能 。 单 击 “ 开 始 ”按钮 ， 开 始 计时 ; 单 击 “ 和 暂停 ”按钮 暂停 计 
时 ; 再 次 单 击 “ 开 始 ” 按 钮 ， 继 续 计 时 ; 单 击 “ 重 置 ” 按 钮 ， 使 计时 器 时 间 归 零 。 实 现 效果 如 图 14.17 
和 图 14.18 所 示 。 
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(提示 : 在 “开始 ”按钮 的 单 击 事件 中 应 用 setInterval0 方 法 开始 计时 ， 在 “暂停 ”和 “ 重 置 ” 按 
钮 的 单 击 事件 中 应 用 clearInterval() 方 法 停止 计时 ) 


00:00 03:63 


开始 匠 停 响 重 轩 开始] 暂停 重 置 | 
图 14.17 开始 计时 图 14.18 ”暂停 计时 
8. 输入 取 票 码 取 票 POOOOO© 


星 哥 在 网 上 买 了 两 张 万 达 影 城 上 映 的 《美女 与 时 兽 ) 的 电影 票 , 电影 票 的 兑换 码 为 99648500463711。 
编写 程序 , 模拟 自动 取 票 机 的 取 票 系统 功能 , 判断 星 哥 取 票 是 否 成 功 , 效果 如 图 14.19 和 图 14.20 所 示 。 


竟 换 码 正确 ， 正 在 出 票 … 


图 14.19 取 票 机 取 票 界面 14.20 ”输入 取 票 码 


9. 获取 验证 码 倒 计时 POOOOOO 


在 有 些 应 用 中 ， 用 户 注册 需要 填写 个 人 的 电话 号 码 ， 并 通过 短信 验证 码 来 完成 注册 。 编 写 程序 ， 
模拟 用 户 注 册 时 获取 短信 验证 码 倒计时 的 功能 。 当 单 击 “ 获 取 验 证 码 ” 按 钮 时 ， 按 钮 文本 会 以 倒计时 
的 形式 提示 用 户 重 新 获取 验证 码 的 时 间 ， 实 现 效果 如 图 14.21 和 图 14.22 所 示 。 

(提示 : 在 setImnterval(0) 方 法 中 设置 元 素 的 innerHTML 属性 ) 


电话 号 码 电话 号 码 |1569632…" 
验证 码 验证 码 56s 后 重新 获取 
注册 注册 
图 14.21 验证 码 表单 图 14.22 获取 验证 码 中 
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10. 更 换 页 面 主题 POOOOOO 


设置 一 个 可 选择 页 面 主题 的 下 拉 列 表 ， 当 选择 某 个 选项 时 可 以 更 换 主题 ， 实 现 文档 背景 色 和 文本 
颜色 变换 的 功能 ， 实 现 效果 如 图 14.23 和 图 14.24 所 示 。 


白 《 行 路 难 。 其 一 》 李白 《行路 难 。 其 一 》 
EE 


停 杯 投 著 不 能 食 ， 拔 剑 四 顾 心 茫然 。 
铭 流 黄河 冰 塞 川 ， 将 登 太 行 雪 满 山 。 
闲 来 委 钓 碧 溪 上 ， 忽 复 乘 舟 梦 日 边 。 
行路 难 ! 行路 难 ! 多 歧路 ， 今 ? 
长 风 破浪 会 有 时 ， 直 挂 云 帆 济 沧海 。 


图 14.23 页 面 主题 (1) 图 14.24 页 面 主题 (2) 


训练 二 : 实战 能 力 强 化 训练 
11， 实现 图 片 轮 播 功能 >Ooooeoee 


实现 一 组 具有 图 片 轮 播 功能 的 选项 卡 。 页 面 右 侧 有 4 个 选项 卡 ， 每 隔 2 秒 钟 选项 卡 就 会 自动 切换 
-次 ， 同 时 左 侧 的 图 片 也 会 相应 地 随 之 变化 。 当 鼠标 指向 某 个 选项 卡 时 ， 左 侧 也 会 显示 对 应 的 图 片 。 
实现 效果 如 图 14.25 和 图 14.26 所 示 。 
(提示 : 在 for 语句 中 为 每 个 选项 卡 设置 一 个 自 定义 的 index 属性 ， 作 为 其 索引 值 ) 


图 14.25 图 一 效果 图 14.26 图 三 效果 
12. 柱 形 图 显示 投票 结果 POOOOOO 


在 投票 类 网 站 中 ， 使 用 柱 形 图 来 分 析 投 票 结果 是 比较 常用 的 一 种 方式 。 设 计 一 个 应 用 柱 形 图 显示 
投票 结果 的 功能 。 在 页 面 中 输出 3 个 以 柱 形 图 表示 的 投票 选项 ,每 个 选项 的 最 上 方 都 有 一 个 图 片 按钮 ， 
每 单 击 一 次 图 片 按钮 ， 对 应 的 投票 数 就 会 加 1， 且 柱 形 图 的 高 度 会 随 着 投票 数 的 增加 而 变化 ， 效 果 如 
图 14.27 和 图 14.28 所 示 。 

(提示 : 应 用 style 对 象 中 的 height 属性 设置 柱 形 图 的 高 度 ) 
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[ 室 [后 [二 fF | [ 筷 
[ L Ed i Ee" g 
| 
四 | | 上 <C Java Web 
14.27 投票 统计 (1) 图 14.28 投票 统计 (2) 
13， 红心 按钮 点 赞 动画 特效 POOOOOO 


设计 一 个 红心 按钮 点 赞 的 动画 特效 。 页 面 中 输出 3 个 可 以 点 赞 的 选项 ， 当 单 击 某 个 心 形 按钮 时 
该 心 形 按钮 会 变 成 红色 ， 并 且 在 改变 颜色 的 过 程 中 会 有 


一 个 动画 效果 。 再 次 单 击 该 心 形 按钮 ， 可 取消 
点 赞 ， 同 时 心 形 按钮 的 颜色 会 变 成 灰色 。 实 现 效果 如 图 14.29 和 图 14.30 所 示 。 
(提示 : 应 用 classList 属性 的 add0 方 法 和 Temove0) 方 法 为 元 素 添加 或 移 除 动画 效果 ) 


HTML CSS JavaScript HTML CSS JavaScript 
p16 12 15 16 、 民 钢 16 
图 14.29 点 赞 前 图 14.30 点 赞 后 
14. 开心 小 农场 


POOOOOO 
操作 DOM 节点 ， 实 现 一 个 开心 小 农场 游戏 。 通 过 播种 、 生 长 、 开 花 和 结果 4 个 按钮 控制 作物 的 
生长 ， 实 现 效果 如 图 14.31、 图 14.32、 图 14.33 和 图 14.34 所 示 。 

(提示 : 应 用 appendChild0 方 法 添加 作物 图 片 ， 应 用 TemoveChild0 方 法 移 除 作物 图 片 ， 应 用 
TeplaceChildO 方 法 替换 作物 图 上 ) 


zr 


aa 


= - - 
我 的 开心 小 容声 


图 14.31 播种 


图 14.32 生长 
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图 14.33 开花 图 14.34 结果 


15， 幸运 大 抽奖 POOOOOO 


实现 随机 抽取 幸运 用 户 的 抽奖 页 面 。 在 页 面 中 输出 一 个 用 于 选择 奖项 等 级 的 下 拉 菜 单 ， 一 个 显示 
参与 抽奖 用 户 名 称 的 区 域 和 一 个 “开始 抽奖 ”按钮 。 单 击 “ 开 始 抽奖 ”按钮 后 ， 用 户 名 称 会 随机 进行 
变化 ， 这 时 下 方 按钮 中 的 文字 变 成 了 “结束 抽奖 ”。 单 击 “结束 抽奖 ”按钮 后 ， 用 户 名 称 区 域 会 显示 
中 奖 用 户 的 名 称 ， 同 时 页 面 上 方 的 中 奖 用 户头 像 也 会 同步 进行 内 烁 ， 实 现 效果 如 图 14.35、 图 14.36 和 
图 14.37 所 示 。 

(提示 : 应 用 random() 方 法 生成 的 随机 数 作 为 用 户 数组 的 索引 ， 应 用 setInterval0 和 clearInterval0 
方法 实现 用 户 名 称 的 变化 和 停止 ) 


国 贺 图 贺 顷 国 网 岛国 国 回国 加 四 罚 周 岛国 国 贺 国 加 曙 本 网 岛 
E3E 


图 14.35 抽奖 前 14.36 抽奖 中 图 14.37 抽奖 后 
16， 模 拟 刊 刊 卡 刊 奖 特 效 >ooooee 


为 了 促进 消费 和 回馈 消费 者 ， 商 家 经 常会 发 放 有 奖 乔 刊 卡 。 编 写 程序 ， 模 拟 乔 刮 卡 的 刮 奖 效果 。 
在 页 面 中 有 一 个 矩形 的 刮 卡 区 域 ， 按 住 鼠标 在 刮 卡 区 域内 移动 ， 刊 掉 涂 层 后 会 显示 中 奖 结果 ， 实现 效 
果 如 图 14.38 和 图 14.39 所 示 。 

(提示 : 在 onmousemove 事件 的 处 理 函 数 中 ， 应 用 canvas 绘制 指定 半径 的 圆 形 ) 


从 天 大 


图 14.38 显示 刊 刊 卡 区 域 图 14.39 显示 中 奖 结果 
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17. 歌曲 置顶 和 删除 POOOOOO 


模拟 点 歌 系统 中 置顶 歌曲 和 删除 歌曲 的 功能 。 单 击 歌曲 和 歌手 名 称 右 侧 的 “置顶 ”按钮 可 置顶 该 
歌曲 ， 单 击 歌曲 和 歌手 名 称 右 侧 的 “删除 ”按钮 ， 可 删除 该 歌曲 。 实 现 效果 如 图 14.40、 图 14.41 和 
图 14.42 所 示 。 

(提示 : 应 用 insertBefore() 方 法 实现 歌曲 置 项， 应 用 removeChild0 方 法 实现 歌曲 删除 ) 


已 点 歌曲 


1 九 百 九 十 九条 玫瑰 


OO 
图 14.40 原始 歌 单 14.41 置顶 歌曲 图 14.42 ”删除 歌曲 
18. 模拟 老虎 机 滚动 抽奖 效果 >Oooeooe@ 
模拟 老虎 机 的 滚动 抽奖 效果 。 页 面 中 显示 一 个 抽奖 区 域 ， 单 击 下 方 的 “立即 抽奖 ”按钮 ， 抽 奖 区 
中 的 奖品 会 上 下 翻滚 。 停止 滚动 后 , 抽奖 区 显示 的 奖品 即 为 中 奖 奖品 , 效果 如 图 14.43 和 图 14.44 所 示 。 
(提示 : 设置 元 素 style 对 象 中 的 top 属性 ， 实 现 奖品 上 下 滚动 ) 


OWOYOYOUOSOuO OOGO 


图 14.43 未 中 奖 图 14.44 中奖 效 果 


19. 幕 帘 动画 效果 POOOOOO 


拉 开 和 关闭 幕 帘 的 动画 效果 可 以 用 于 广告 特效 ， 也 可 以 用 于 个 人 主页 。 编 写 程序 ， 实 现 拉 开 和 关 
闭幕 帘 的 动画 效果 。 在 初始 状态 下 ， 幕 帘 是 关闭 的 。 单 击 “ 拉 开幕 帘 ” 超 链接 ， 幕 帘 会 向 左右 拉 开 ; 
单 击 “ 关 闭幕 帘 ” 超 链接 ， 幕 帘 会 向 中 间 关 闭 ， 实 现 效果 如 图 14.45 和 图 14.46 所 示 。 

(提示 : 在 setInterval(0 方 法 的 处 理 函 数 中 设置 左 、 右 两 侧 幕 帘 的 宽度 ) 
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图 14.45 ” 帘 幕 关闭 图 14.46 帘 幕 已 拉 开 


20. 模拟 微 信 弹出 菜单 >OoG@oo@ 


模拟 微 信 弹 出 菜单 功能 。 页 面 底部 显示 3 个 主 菜 单项 ， 单 击 某 菜单 项 ， 弹 出 其 对 应 的 子 菜单 。 再 
次 单 击 其 他 主 菜单 项 ， 已 弹出 的 子 菜单 项 被 隐藏 ， 同 时 弹出 新 的 子 菜单 项 ， 效 果 如 图 14.47 和 图 14.48 
所 示 。 

(提示 : 设置 元 素 style 对 象 的 top 属性 ， 隐 藏 和 显示 元 素 ) 


) 网 站 前 台 ) 网 站 后 台 数据 库 


图 14.47 微 信 菜 单 


网 站 前 台 个 网 站 后 台 9 数据 库 


图 14.48 单 击 弹出 子 菜单 
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21. 模拟 微 信 输入 支付 密码 >Oog@ooo@ 


模拟 微 信 支付 时 输入 支付 密码 的 功能 。 手 机 充值 页 面 中 有 一 个 “立即 支付 ”按钮 ， 单 击 该 按钮 时 ， 
页 面 中 弹出 包括 密码 输入 框 和 数字 键盘 的 密码 输入 界面 。 按 下 某 个 数字 按键 ， 选 择 的 数字 会 以 密码 形 
式 显 示 在 上 方 输入 框 中 , 当 输 入 的 密码 为 123456 时 ,页 面 弹 出 支付 成 功 的 提示 信息 .实现 效果 如 图 14.49 
和 图 14.50 所 示 。 
(提示 : 设置 元 素 style 对 象 的 height 属性 ， 改 变 高 度 ) 


2 
| 6 
8 
0 


工 

4 

7 
清空 


图 14.49 密码 输入 页 面 


¥ 50.00 


支付 成 功 


完成 


14.50 ”密码 正确 后 立即 支付 
22. 实现 电影 海报 轮 播 POOQOOOO 


实现 热 映 电影 海报 轮 播 的 动态 效果 。 每 屏 显示 5 张 电影 海报 ， 单 击 右上 角 的 向 左 按钮 和 向 右 按 钮 ， 
会 切换 至 上 一 屏 或 下 一 屏 的 5 部 电影 海报 ， 效 果 如 图 14.51 所 示 。 
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(提示 : 在 setInterval(0 方 法 的 处 理 函 数 中 应 用 元 素 style 对 象 的 left 属性 ) 


正在 热 映 


楚 门 的 世界 
9.2 


13@e9 


盗 梦 空间 
9.3 


图 14.51 


实现 效果 
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本 章 训练 任务 对 应 核心 技术 分 册 第 15 一 16 章 “ 响 应 式 网 页 设计 ”与 “组 件 ” 部 分 。 
侣 ”重点 练习 内 容 : 
。 常见 响应 式 布局 的 实现 方式 。 
.各 种 响应 式 布局 的 运用 及 优 缺点 。 
。 媒体 查询 的 使 用 。 
. 运用 响应 式 插 件 进行 响应 式 布 局 。 


上 mm ID 一 


应 用 技能 拓展 学 习 


1. 媒体 查询 的 使 用 


媒体 查询 可 以 根据 设备 显示 器 的 特性 〈 如 视 口 宽度 、 屏 幕 比例 和 设备 方向 ) ， 设 定 CSS 的 样式 。 
媒体 查询 由 媒体 类 型 和 一 个 或 多 个 检测 媒体 特性 的 条 件 表达 式 组 成 。 媒 体 查询 中 可 用 于 检测 的 媒体 特 
性 有 width、height 和 color 等 。 使 用 媒体 查询 ， 可 以 在 不 改变 页 面 内 容 的 情况 下 ， 为 特定 的 输出 设备 
定制 显示 效果 。 

媒体 查询 的 使 用 步骤 如 下 : 

首先 ， 在 HTML 页 面 的 <head> 标 签 中 添加 viewport 属性 代码 。 代 码 如 下 : 


<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/> 
其 中 ， 各 属性 值 表示 的 含义 如 表 15.1 所 示 。 
表 15.1 viewport 属性 中 常用 的 属性 值 及 含义 


属 性 值 含义 
width=device-width 设 定 布局 视 口 宽度 
initial-scale=1 设 定 布局 视 口 高 度 


设 定 页 面 初始 缩放 比例 0 一 10) 
设 定 用 户 是 否 可 以 缩放 (yes/no) 


Iaximum-scale=1 


user-scalable=no 


然后 ， 使 用 @media 关键 字 编写 CSS 媒体 查询 代码 。 

例如 ， 当 设备 屏幕 宽度 为 320 一 720 像素 时 ， 在 媒体 查询 中 设置 body 的 背景 色 background-color 
的 属性 值 为 rd， 并 覆盖 原来 的 body 背景 色 : 当 设备 屏幕 宽度 小 于 等 于 320 像素 时 ， 在 媒体 查询 中 设 
置 body 背景 色 的 background-color 属性 值 为 blue， 并 覆盖 原来 的 body 背景 色 。 代 码 如 下 : 
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让 当 设备 宽度 在 320 一 720px 时 */ 
@media screen and (max-width: 720px) and (min-width: 320px) { 
body{ 
background-color: red; 
} 


} 
/ 当 设备 宽度 小 于 等 于 320px 时 */ 
@media screen and (max-width: 320px) { 
body{ 
background-color: blue; 
} 
} 


2. 响应 式 插件 之 栅 格 系统 


栅 格 系统 (Grid Systems) 又 叫 作 网 格 系统 ， 即 运用 固定 的 格子 来 设计 版 面 布局 ， 其 风格 工整 简洁 。 
有 具体 地 说 ， 就 是 将 网 页 按 宽 度 分 为 12 等 份 ， 开 发 人 员 可 以 自由 分 配 项 目 中 列 所 占 的 份 数 。 例 如 ， 定 义 
每 列 的 宽度 为 2 格 ， 则 一 行 显示 6 列 项 目 ; 定义 每 列 的 宽度 为 3 格 ， 则 一 行 显示 4 列 项 目 ， 以 此 类 推 ， 
网 格 效果 如 图 15.1 所 示 。 

这 并 不 表示 所 有 列 的 总 宽度 必须 填 满 12 列 ， 而 是 只 要 不 超过 12 列 就 可 以 。 如 果 超 过 了 12 列 ， 则 
自动 进行 换行 处 理 。 


本 本 区 加 区 辣 醒 司 必 可 本 本 攻 可 融 避 融 癌 贡 梧 民 避 攻 呈 | 


2 4 2 2 2 4 
Es | 
[ 4 [ 4 | 4 ] 
[ 6 I 6 ] 


图 15.1 栅 格 系统 
(1) 网 格 化 选项 
栅 格 系统 提供 了 5 个 网 格 等 级 ， 每 个 响应 式 分 界 点 分 隔 出 一 个 等 级 。 各 等 级 的 屏幕 尺寸 以 及 类 名 
前 缀 如 表 15.2 所 示 。 


表 15.2 ” 栅 格 系统 的 网 格 等 级 


超大 屏幕 


超 小 屏幕 小 屏幕 中 等 屏 大 屏幕 


(<576px) (2576px) (2768px) (2992px) (21200px) 
.Container 
最 大 宽度 None(auto) 540px 720px 960px 1140px 
类 前 级 .Col- .Col-sm- .Col-md- -Col-le- | .Col-md- 
平板 桌面 显示 器 大 型 桌面 显示 器 超大 型 桌面 显示 器 
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网 格 布局 断 点 的 媒体 查询 ， 都 是 基于 宽度 最 小 值 (min-width) 的 。 这 意味 着 ， 对 应 的 媒体 查询 可 
应 用 到 该 等 级 之 上 的 所 有 设备 中 。 例 如 ，.col-md-4 的 定义 ， 可 以 在 中 等 屏幕 、 大 屏幕 以 及 超大 屏幕 上 
呈现 效果 ， 但 在 小 屏幕 和 超 小 屏幕 上 不 会 起 作用 。 

(2) 设置 列 的 宽度 

Bootstrap 3 中 ， 需 要 严格 定义 栅 格 系统 中 每 一 列 的 宽度 ， 如 col-md-3 等 。Bootstrap 4 中 ， 由 于 可 
与 弹性 布局 相 结合 ， 因 此 可 通过 以 下 几 种 方式 定义 列 的 宽度 。 

回 col: 若 一 个 row 中 定义 了 多 个 col， 则 这 几 个 col 平分 row 的 宽度 。 

col-auto: 该 类 名 表示 当空 间 缩小 时 ， 为 该 项 保留 足够 空间 。 

col-{smlmdlxmllg } -x: 该 类 名 表示 在 对 应 屏幕 范围 类 占据 的 个 数 ， 

匈 注 意 : col 类 名 必须 作为 row 的 直接 子 元 素 ， 否 则 宽度 设置 无 效 。 


实战 技能 强化 训练 


训练 一 : 基本 功 强化 训练 
1. 开心 消 消 乐 “ 最 新 活动 ”页 面 >Oooooo@e@ 
开心 消 消 乐 是 一 款 老少 皆 宣 的 休闲 游戏 ， 并 且 不 时 会 推出 一 些 活动 。 通 过 弹性 布局 实现 开心 消 消 


乐 官网 的 “最 新 活动 ”模块 ， 如 图 15.2 所 示 。 该 模块 始终 在 页 面 中 垂直 居中 显示 ， 放 大 浏览 器 时 ， 最 
左 侧 的 内 容 放大 ， 而 中 间 和 右边 内 容 不 变 。 


活动 


【开心 清 消 乐 〗 耶 ! 暴 击 时 间 到 ! 


【游戏 新 活动 】 魔 幻 马戏 团 ， 道 具 等 你 会 ! 


图 152 “最 新 活动 ” 模块 
2. 浏览 器 缩小 时 ， 隐 藏 成 绩 表 中 的 列 POOOOOO 


响应 式 表 格 中 的 一 种 表现 方式 是 : 可 根据 浏览 器 屏幕 大 小 隐藏 表格 中 的 部 分 列 。 实 现 如 图 15.3 所 
示 的 考试 成 绩 表 ， 当 浏览 器 缩小 至 800 像素 时 ， 表 格 的 最 后 一 列 被 隐藏 ， 当 浏览 器 继续 缩小 至 640 像 
素 时 ， 表 格 再 次 隐藏 最 后 一 列 ， 效 果 如 图 15.4 所 示 。 
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年 份 语文 英语 化 学 物理 生物 
2017 年 85 9 75 58 66 87 
2016 年 ?8 和 78 68 7T8 85 
2015 年 8 36 93 1 8 93 
2014 年 Te 本 6 63 68 98 
2013 年 35 go 了 G3 68 87 
2012 年 29 a 中 名 吧 14 


图 15.4 表格 后 两 列 被 隐藏 
3. 翻转 并 滚动 显示 招聘 表 POOOOOO 


实现 响应 式 表格 的 方法 有 3 种 : 隐藏 、 滚 动 或 转换 表格 中 的 列 。 编 写 程序 ， 当 表格 完全 显示 时 ， 
滚动 显示 表格 中 的 列 ， 效 果 如 图 15.5 所 示 ; 当 浏览 器 屏幕 缩小 时 ， 表 格 中 的 行 、 列 互 换 ， 且 表 文 部 分 
滚动 显示 ， 效 果 如 图 15.6 所 示 。 

(提示 : 要 使 表格 的 行 、 列 翻转 ， 需 将 表格 元 素 的 display 属性 强行 修改 为 block) 


工作 地 点 web 前 端 Android 开 发 Python Java 测试 
[mal | 二 | 三 | 芭 下 

可 [Te 

2 , [wx | 

大 连 


”工作 地 点 [上海 | 北京 [| 重庆 | | 广州 | | 深圳 


mob 前 端 |5 人 |? 人 ||5A | 和 || 玉 


android 开 发 | 3 人 | | 5 人 || 只 | 以 || 到 


Python |1 人 ||s 人 AI7A|| 碎 ||a 


Java |3 人 ||sA||24|| 玉 || 了 


测试 |2 人 ||2 人 2 人 | 纹 || 共 


图 15.6 ”行列 翻转 且 滚 动 显示 的 表格 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


4. CSS 实现 响应 式 导 航 栏 POOQOOOO 


通过 CSS 中 的 媒体 查询 ， 实 现 响应 式 导 航 栏 。 在 PC 端 浏 览 页 面 时 ， 效 果 如 图 15.7 所 示 ; 在 手机 
端 浏览 页 面 时 ， 轮 播 图 将 隐藏 ， 导 航 栏 由 横向 变 为 纵向 ， 运 行 效果 如 图 15.8 所 示 。 


玩 好 编程 才能 用 好 编程 
1s 了 22。M n3s \( 54: 
@GG : 
图 15.7 PC 端 页 面 效果 图 15.8 ”移动 端 页 面 效 果 

5. 实现 课程 推荐 列表 页 面 POOOOOO 


编写 程序 ， 通 过 bootstrap 中 的 弹性 布局 实现 直播 精品 课程 推荐 页 面 。 网 页 缩小 或 放大 时 ， 课 程 信 
息 会 随 之 伸缩 ， 实 现 效果 如 图 15.9 所 示 。 
(提示 : 通过 flex-grow-1 实现 网 页 伸展 ， 扩 展 该 项 目 ) 
精品 课程 推荐 


第 1 讲 Q 友 一 做 你 自己 的 QQ- 开 发 背景 
c#| 项 目 免费 


1 分 41 秒 1944 人 学 习 


第 1 讲 挑战 2048 
C 语 言 | 项 目 免费 


3 分 20 秒 908 人 学 习 


第 1 讲 趣味 俄罗斯 方块 -开发 背景 
C 语 言 | 项目 免费 


2 钟 2741 人 学 习 


15.9 直播 课程 推荐 列表 
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训练 二 : 实战 能 力 强 化 训练 
6.360 趣 玩 页 面 >oooeoooee 


通过 bootstrap 实现 一 则 360 趣 玩 推送 消息 。 在 PC 端 ， 页 面 在 网 页 中 居中 国定 显示 ; 在 移动 端 ， 
页 面 全 屏 显示 。 具 体 实现 效果 如 图 15.10 所 示 。 


话 梅 、 杨 梅 、 草 大 选美 
问题 措 壕 ， 如 果 话 梅 草花、 杨梅 是 人 的 话 ， 他 们 谁 的 打扮 地 不 
时 尚 ? 


15.10 。 趣 玩 页 面 
7. 响应 式 游戏 活动 介绍 页 面 POOOOOO 


通过 bootstrap 实现 响应 式 游戏 活动 介绍 页 面 。 在 PC 端的 运行 效果 如 图 15.11 所 示 , 在 移动 端的 运 
行 效果 如 图 15.12 所 示 。 


全 we_、l 

活动 新 闻 /公告 活动 新 闻 / 公 告 
ET 2019-05-25 
[ 动 | 则 时 折扣 ， 海 龙 6 905-17 | 2019-0517 
(活动 | 月 有 天 地 ， 重 笑 志 5-04-27 动 | 阴阳 天 地 ， 岗 20190427 


2019-04-23 


降 动 四 月 至 宝 ， 少 女 的 礼 2019-04-12 
话 动 天 八大 餐 ， 限 时 章 声 2019-04-05 
蜂 动 奢 光 女神 , 308 洱 2019-04-01 
查看 更 多 >> 


图 15.11 PC 端 游戏 活动 页 面 图 15.12 移动 端 游 戏 活动 页 面 


HTML5+CSS3+JavaScript 从 入 门 到 精通 ( 微 视频 精 编 版 ) 


8. 响应 式 游戏 列表 页 面 >Ooo@oe@oe@ 


使 用 bootstrap 中 的 混合 布局 ， 实 现 一 个 响应 式 游戏 列表 页 面 。 初 始 PC 端 游戏 列表 显示 为 6 列 ; 
缩小 浏览 器 屏幕 时 ， 游 戏 列表 的 列 数 逐 渐 减 少 ， 如 图 15.13 所 示 ; 当 浏 览 器 屏幕 缩小 至 手机 宽度 时 ， 游 
戏 列表 分 两 列 展示 ， 如 图 15.4 所 示 。 


图 15.13 页 面 分 3 列 显示 图 15.14 页 面 分 两 列 显示 
9. 女装 专场 活动 页 面 POOOOOO 


每 着 节假日 ， 京 东 、 淘 宝 等 各 大 购物 网 站 都 会 开启 打折 促销 活动 。 为 电 商 网 站 制作 一 个 女装 专场 
页 面 ， 效 果 如 图 15.15 所 示 。 
(提示 : 通过 col-auto 属性 实现 元 素 始终 在 页 面 中 留 有 足够 空间 ) 


十 一 出 淅 美美 赂 
大 牌 时 尚 女神 专场 


X 
Ey 
人 


0 


图 15.15 ”女装 专场 活动 页 面 
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10. Bootstrap 实现 图 片 轮 播 >OoG@oooe 


轮 播 广告 是 网 站 重要 的 一 部 分 。 运 用 Bootstrap 中 的 轮 播 图 插件 ， 实 现 页 面 图 片 的 轮 播 效果 ， 如 
图 15.16 所 示 。 


图 15.16 bootstrap 实现 图 片 轮 播 
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